我正在使用Highstock setExtremes替换系列中的标志。将鼠标悬停在最大和最小标记上时,请记下日期和工具提示文本。
移动范围滑块,注意最大和最小标志的标题混淆了。这可能需要一点点移动滑块才能看到这种情况发生。然后,您将看到min flag工具提示显示:“new max”,max flag工具提示将显示“new min”。
以下是https://jsfiddle.net/mobijay/q7djqypa/
$(function() {
$('#container').highcharts('StockChart', {
xAxis: {
events: {
setExtremes: function(e) {
updateDataSummary(e.min, e.max);
}
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur,
id: 'dataseries'
}, {
type: 'flags',
onSeries: 'dataseries',
name: 'Updated Flags',
data: [{
title: 'max',
text: 'original max',
x: Date.UTC(2015, 6, 1)
}, {
title: 'min',
text: 'original min',
x: Date.UTC(2015, 6, 12)
}]
}]
});
});
function updateDataSummary(min, max) {
var chart = $("#container").highcharts();
console.log(chart.series[1].name);
var minMaxSeries = {
type: 'flags',
onSeries: 'dataseries',
name: 'work',
data: [{
title: 'max',
text: 'new max',
x: Date.UTC(2015, 5, 12)
}, {
title: 'min',
text: 'new min',
x: Date.UTC(2015, 5, 1)
}]
};
chart.series[1].setData(minMaxSeries.data, false);
chart.redraw();
}
<div id="container" style="height: 400px; min-width: 600px"></div>
<div id="report" style="font: 0.8em sans-serif"></div>