English 中文(简体)
Highcharts => Getting the id of a point when clicking on a line chart
原标题:

I am building a line chart and I would like, when I click on a point of the line, to display a popup containing some data about this point. The issue I try to resolve is to get the id, the series associated with this point or something like that.

Here is my code :

plotOptions: {
      column: {
        pointWidth: 20
      },

      series: {
        cursor:  pointer ,
        events: {
          click: function(event) {
            requestData(event.point);
          }
        }
      }

I tried

requestData(this.point)

,

requestData(this.point.id)

also but it doesn t work.

How do we get the id of a point ?

Thanks a lot.

问题回答

According to the docs, event.point holds a pointer to the nearest point on the graph.

So I d write the event.point to the console, and see what s available.

console.log(event.point);

From the docs:

click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.

Example based on the example from the docs: http://jsfiddle.net/5nTYd/

Click a point, and check the console.

I just did this by passing 3 objects into the series data array and then pulling it out of the object s config attribute from the click.

So you can construct your series data something like this:

 series: [{
  name:  Example ,
  yAxis: 0,
  type:  spline ,
  data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]

In the data attribute above the 1st element is the date (x), the 2nd element is another data point (y), and the 3rd is the id of the object that represent that data object. This "z" will not show up on the graph but will show up as the 3rd element in the config array. For example: using plotOptions point attribute to capture the click, the ID of the object is in the alert as this.config[2]

  plotOptions: {
    series: {
      cursor:  pointer ,
      point: {events: {click: function() {console.log(this); alert( Category:  + this.category + , value:  + this.y +  Series:   +  this.series.name +   ID:   + this.config[2])}}}
     }
   },

To return the ID of the selected point on the chart use the X value:

plotOptions: {
    series: {
        cursor:  pointer ,
        events: {
            click: function(event) {
                   // Log to console
                console.log(event.point);
                alert(this.name +  clicked
 +
                       Alt:  + event.altKey + 
 +
                       Control:  + event.ctrlKey + 
 +
                       Shift:  + event.shiftKey + 
 +
                       Index:  + event.point.x);
            }
        }
    }
},

See an example here: http://jsfiddle.net/engemasa/mxRwg/

I had the same problem ... if I understand correctly. My solution is this, to get the id of the series ... See if it helps ...

plotOptions{
 series:{
  cursor:  pointer ,
    events: {
      click: function(event) {
        console.log(event.point.series.userOptions.id);
      }
    }
  }

i found this old post in my search to ==>add a marker to a point when i click a Highcharts "Trend Line" [in examples: "line-time-series"] chart[when i click anywhere on the drawn line itself]. well, without showing you too much code, look in the

  cursor:  pointer ,
                    point: {
                      events: {
                             click: function(e) {
                                alert("X("+this.x+"),Y("+this.y+")");
                                }//click
                          }//events
                           }//point

if you would like more detail, i m happy to provide!

 plotOptions: {
   series: {
     cursor:  pointer ,
     point: {
       events: {
         click: function() {
           console.log(this); 
           alert( Category:  + this.category + , value:  + this.y +  Series:   +  this.series.name +   ID:   + this.config[2])
         }
       }
     }
   }
 },




相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签