#highcharts
#верхние диаграммы
Вопрос:
Когда я визуализирую линейную диаграмму с несколькими рядами, ряд, который имеет наибольшее значение y для данной точки данных, будет каждый раз запускать событие onclick. Любая другая серия иногда запускает ее, а иногда нет. Кажется, я не могу найти какой-либо шаблон. Если я скрою ряд, новое наибольшее значение y начнет работать, даже если раньше этого не было.
В настоящее время я использую версию highcharts версии 6.0.1, но я воссоздал проблему и в последней версии. Это также происходит в 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, который я отображаю в своем приложении, потому что, когда я пробовал образцы данных, я не мог воссоздать проблему. Я полагаю, что у меня что-то настроено неправильно, но я понятия не имею, что это может быть.
В примере вы можете видеть, что все точки данных для сериала запускают событие, но больше ничего не происходит. Если вы скроете сериал, все остальные сериалы, кроме блога, начнут работать. Любая помощь в выяснении этого была бы весьма признательна.
Ответ №1:
Вы установили тип диаграммы равным areaspline . Вот почему точки рядов ниже основного верхнего скрыты под ним (проверьте это в этой демонстрации: https://jsfiddle.net/BlackLabel/1gs5pb0w/1 /). Чтобы все работало должным образом, просто измените тип диаграммы на spline .
Код:
"chart":{
"height":400,
"type":"spline"
}
ДЕМОНСТРАЦИЯ: