我目前正在构建一个highcharts仪表板但遇到问题。如果我尝试将highcharts synchronized图表与其他图表组合在一起,则工具提示会出现其他图形错误。如果移动同步图形,工具提示会在其他图形中移动并保持可见。
为了说明我的意思,我做了以下例子:
$('#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
因此,我认为工具提示适用于所有高级图表。
希望你能帮助我解决这个问题!
答案 0 :(得分:2)
你是对的,问题是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);
}
}
}
});