我目前正在构建 highcharts 仪表板,但遇到问题。如果我尝试将 highcharts 同步图表与其他图表结合起来,则工具提示与其他图表会出现错误。如果您在同步图表上移动,工具提示将在其他图表中移动并保持可见。
为了说明我的意思,我做了以下示例:
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
// Find coordinates within the chart
event = chart.pointer.normalize(e.originalEvent);
// Get the hovered point
point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
});
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
Highcharts.Point.prototype.highlight = function(event) {
event = this.series.chart.pointer.normalize(event);
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(
e.min,
e.max,
undefined,
false, {
trigger: 'syncExtremes'
}
);
}
}
});
}
}
我怀疑这就是问题
Highcharts.charts
因此,我认为工具提示适用于所有 highcharts 图表。
希望您能帮我解决这个问题!
最佳答案
你是对的,问题是 Highcharts.chart
数组,它包含页面上的所有图表。对于您的情况,一个好主意是向图表选项添加额外的属性以指示同步图表,例如:
.highcharts({
chart: {
isSynced: true, // our own property
height: 100,
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
...
});
现在过滤掉这些图表:
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
// Only charts in sync:
if (chart && chart.options.chart.isSynced) {
// Find coordinates within the chart
event = chart.pointer.normalize(e.originalEvent);
// Get the hovered point
point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
}
});
关于javascript - Highcharts 同步图表与其他图表结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48608331/