我在高图表中使用面积图。我需要堆叠面积图和工具提示不得共享。
请参考这里的小提琴:jsfiddle.net/xqk6etzd/
问题是:当我将鼠标悬停在 S2 上时(在 S1 的所有点均为 0 之后),它会在工具提示中显示 S1 值而不是 S2。您可以尝试隐藏 S3 以便更好地进行测试。
同样,工具提示不得共享,所以我在工具提示选项中设置了 shared:false。
在高图表中是否有这样的错误?还是我的代码中存在一些问题?
请帮忙。
堆叠设置为正常,这意味着一个面积图位于另一个面积图之上。行为正确:
plotOptions: {
area: {
stacking: 'normal'
},
但是,如果你真的需要改变它,你可以检查实际面积的值,如果它等于零,只需将其与下一个值(jsfiddle)交换:
tooltip: {
shared: false,
formatter: function() {
if (this.y == 0) {
return this.series.chart.series[1].name + ': ' +this.series.chart.series[1].yData[this.x];
} else
return this.series.name + ': ' +this.y;
}
},
检查 jsfiddle 示例:
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
tooltip: {
shared: false,
formatter: function() {
if ((this.y == 0)&&(this.series.name==this.series.chart.series[0].name)) {
debugger;
return '<b>'+ this.series.chart.series[1].name +'</b>:' +this.series.chart.series[1].yData[this.x];
} else
return '<b>'+ this.series.name +'</b>:' +this.y;
}
},
plotOptions: {
area: {
stacking: 'normal'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert("column index: " + this.series.columnIndex);
}
}
}
}
},
series: [{
index: 1,
"name": "S1",
"data": [619, 406, 300, 41, 174, 10, 235, 495, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
index: 2,
"name": "S2",
"data": [507, 90, 752, 548, 133, 528, 151, 553, 734, 341, 774, 810, 618, 89, 125, 202, 354, 317, 239, 82, 112, 155, 849, 258, 848]
}, {
index: 3,
"name": "S3",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 593, 110, 705, 569, 793, 437, 173, 300, 618, 693, 138, 38, 106, 525, 142, 807]
}]
});
});