当我渲染具有多个系列的折线图时，对于给定数据点具有最高y值的系列将每次触发onclick事件。其他所有系列有时会触发它，有时则不会。我似乎无法找到任何模式。如果我隐藏一个系列，新的最高y值将开始工作，即使之前没有。
我目前正在使用v6.0.1的highcharts，但我也在最新版本中重新创建了这个问题。它也发生在Chrome，Firefox和IE上。
我在这里发现了一个关于点击事件的线程，当显示多个系列时，点击事件没有触发，但这特别是关于两个具有相同值的系列，以便数据点堆叠在彼此之上。
我创建了一个jsfiddle来演示这个问题。 https://jsfiddle.net/2opdhxb6/1/。
Highcharts.chart('container', {
"chart":{
"height":400,
"type":"areaspline"
},
"colors":[
"#86bbd8",
"#5e2e94",
"#c83258",
"#ffb400",
"#7bcdba",
"#ff8300",
"#4464ad",
"#e1cba4",
"#ff9bb8",
"#808285",
"#da3ab3",
"#6ecdb2",
"#e2cc00",
"#d8635d",
"#3b5cad",
"#9778d3",
"#00bfd6",
"#5b2c3f",
"#4c8b2b",
"#d9a460"
],
"credits":{
"enabled":false
},
"legend":{
"borderWidth":"0",
"symbolRadius":3
},
"plotOptions":{
"series":{
"cursor":"pointer",
"fillOpacity":0,
"lineWidth":2,
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"point":{
"events":{
"click":function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
},
"turboThreshold":50000
},
"spline":{
"lineWidth":2,
"marker":{
"enabled":true,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"turboThreshold":50000
}
},
"series":[
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Blog",
"Type":"SubMedia",
"Value":"BL",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Blog",
"Type":"SubMedia",
"Value":"BL",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":1182
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Blog",
"Type":"SubMedia",
"Value":"BL",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":1034
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Blog",
"Type":"SubMedia",
"Value":"BL",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":2164
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Blog",
"Type":"SubMedia",
"Value":"BL",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":1870
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Blog",
"Type":"SubMedia",
"Value":"BL",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":1324
}
],
"name":"Blog"
},
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Forum",
"Type":"SubMedia",
"Value":"FO",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Forum",
"Type":"SubMedia",
"Value":"FO",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":225
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Forum",
"Type":"SubMedia",
"Value":"FO",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":239
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Forum",
"Type":"SubMedia",
"Value":"FO",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":299
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Forum",
"Type":"SubMedia",
"Value":"FO",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":332
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Forum",
"Type":"SubMedia",
"Value":"FO",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":181
}
],
"name":"Forum"
},
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Online News",
"Type":"SubMedia",
"Value":"NM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Online News",
"Type":"SubMedia",
"Value":"NM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":4789
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Online News",
"Type":"SubMedia",
"Value":"NM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":8495
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Online News",
"Type":"SubMedia",
"Value":"NM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":10207
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Online News",
"Type":"SubMedia",
"Value":"NM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":5324
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Online News",
"Type":"SubMedia",
"Value":"NM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":3383
}
],
"name":"Online News"
},
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Print Media",
"Type":"SubMedia",
"Value":"PR",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Print Media",
"Type":"SubMedia",
"Value":"PR",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":542
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Print Media",
"Type":"SubMedia",
"Value":"PR",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":390
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Print Media",
"Type":"SubMedia",
"Value":"PR",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":729
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Print Media",
"Type":"SubMedia",
"Value":"PR",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":713
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Print Media",
"Type":"SubMedia",
"Value":"PR",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":390
}
],
"name":"Print Media"
},
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Social Media",
"Type":"SubMedia",
"Value":"SM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Social Media",
"Type":"SubMedia",
"Value":"SM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":113
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Social Media",
"Type":"SubMedia",
"Value":"SM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":94
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Social Media",
"Type":"SubMedia",
"Value":"SM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":79
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Social Media",
"Type":"SubMedia",
"Value":"SM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":99
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Social Media",
"Type":"SubMedia",
"Value":"SM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":33
}
],
"name":"Social Media"
},
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Radio",
"Type":"SubMedia",
"Value":"TM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Radio",
"Type":"SubMedia",
"Value":"TM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":323
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Radio",
"Type":"SubMedia",
"Value":"TM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":228
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Radio",
"Type":"SubMedia",
"Value":"TM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":359
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Radio",
"Type":"SubMedia",
"Value":"TM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":319
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"Radio",
"Type":"SubMedia",
"Value":"TM",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":180
}
],
"name":"Radio"
},
{
"data":[
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"TV",
"Type":"SubMedia",
"Value":"TV",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":0
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"TV",
"Type":"SubMedia",
"Value":"TV",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":13247
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"TV",
"Type":"SubMedia",
"Value":"TV",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":14163
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"TV",
"Type":"SubMedia",
"Value":"TV",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":12370
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"TV",
"Type":"SubMedia",
"Value":"TV",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":14956
},
{
"Date":null,
"Medium":null,
"MediumName":null,
"SearchName":null,
"SearchTerm":"TV",
"Type":"SubMedia",
"Value":"TV",
"marker":{
"enabled":false,
"lineWidth":1,
"radius":3,
"symbol":"circle"
},
"name":null,
"y":6382
}
],
"name":"TV"
}
],
"subtitle":{
"style":{
"color":"#c4c4c4",
"fontFamily":"Avenir",
"fontSize":"12px",
"fontWeight":null,
"minWidth":null,
"textAlign":null,
"width":null
},
"text":"(By Medium)"
},
"title":{
"style":{
"color":null,
"fontFamily":"Avenir",
"fontSize":"20px",
"fontWeight":"bold",
"minWidth":null,
"textAlign":null,
"width":null
},
"text":"Hits"
},
"tooltip":{
"valueSuffix":""
},
"xAxis":{
"categories":[
"4\/12\/2019",
"4\/13\/2019",
"4\/14\/2019",
"4\/15\/2019",
"4\/16\/2019",
"4\/17\/2019"
],
"dateTimeLabelFormats":null,
"gridLineColor":null,
"gridLineDashStyle":null,
"gridLineWidth":null,
"labels":{
"enabled":true,
"formatter":null,
"rotation":0,
"staggerLines":0,
"style":{
"color":null,
"fontFamily":"Avenir",
"fontSize":null,
"fontWeight":null,
"minWidth":null,
"textAlign":null,
"width":null
},
"useHTML":false
},
"minorGridLineWidth":null,
"minorTickInterval":null,
"plotBands":null,
"tickInterval":0,
"tickWidth":2,
"tickmarkPlacement":"off",
"title":null,
"type":null
},
"yAxis":[
{
"allowDecimals":true,
"minRange":0.1,
"title":{
"margin":10,
"rotation":270,
"style":{
"color":null,
"fontFamily":"Avenir",
"fontSize":null,
"fontWeight":null,
"minWidth":null,
"textAlign":null,
"width":null
},
"text":null
}
}
]
});
它使用我在我的应用程序中呈现的实际JSON，因为当我尝试样本数据时，我无法重新创建该问题。我想我必须配置错误的东西，但我不知道它可能是什么。
在该示例中，您可以看到电视剧的所有数据点都会触发事件，但没有其他任何内容。如果你隐藏电视剧，除博客以外的所有其他系列都会开始工作。任何帮助搞清楚这一点将不胜感激。
您已将图表类型设置为等于areaspline。这就是为什么在主要上面的系列点隐藏在它下面的原因（在这个演示中检查它：https://jsfiddle.net/BlackLabel/1gs5pb0w/1/）。要使其按预期工作，只需将图表类型更改为spline。
码：
"chart":{
"height":400,
"type":"spline"
}
演示：