17

我正在构建一个折线图，当我单击该线的一个点时，我想显示一个包含有关该点的一些数据的弹出窗口。我试图解决的问题是获取 id、与这一​​点相关的系列或类似的东西。

这是我的代码：

plotOptions: {
      column: {
        pointWidth: 20
      },

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

我试过了

requestData(this.point)

,

requestData(this.point.id)

也，但它不起作用。

我们如何获得一个点的 id ？

非常感谢。

4

6 回答 6

16

根据文档，event.point 持有指向图上最近点的指针。

所以我会写到event.point控制台，看看有什么可用的。

console.log(event.point);

从文档：

click：点击系列时触发。this 关键字指的是系列对象本身。一个参数，事件，被传递给函数。这包含基于 jQuery 或 MooTools 的常见事件信息，具体取决于哪个库用作 Highcharts 的基础。此外， event.point 包含一个指向图表上最近点的指针。

基于文档示例的示例：http: //jsfiddle.net/5nTYd/

单击一个点，然后检查控制台。

于 2010-08-19T18:10:18.510 回答
11

我只是通过将 3 个对象传递到系列数据数组中，然后通过单击将其从对象的配置属性中拉出来做到这一点。

所以你可以像这样构建你的系列数据：

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

在第一个元素上方的数据属性中，第一个元素是日期 (x)，第二个元素是另一个数据点 (y)，第三个元素是表示该数据对象的对象的 id。这个“z”不会显示在图表上，但会显示为配置数组中的第三个元素。例如：使用plotOptions点属性捕捉点击，该对象的ID在alert中为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])}}}
     }
   },
于 2011-04-21T22:17:19.693 回答
3

要返回图表上选定点的“ID”，请使用“X”值：

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

在此处查看示例：http: //jsfiddle.net/engemasa/mxRwg/

于 2013-05-10T14:33:24.470 回答
1

我有同样的问题......如果我理解正确的话。我的解决方案是这样，获取系列的 id ...看看它是否有帮助...

plotOptions{
 series:{
  cursor: 'pointer',
    events: {
      click: function(event) {
        console.log(event.point.series.userOptions.id);
      }
    }
  }
于 2015-01-22T08:47:14.810 回答
0

我在搜索中发现了这篇旧帖子 ==> 当我单击 Highcharts“趋势线”[在示例中：“line-time-series”] 图表 [当我单击绘制线本身的任意位置时，将标记添加到一个点]。好吧，不用向您展示太多代码，请查看

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

如果您想了解更多详细信息，我很乐意提供！

于 2013-02-26T15:04:12.707 回答
0 
 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])
         }
       }
     }
   }
 },
于 2017-08-22T09:43:51.237 回答