我有一些图表可以分别显示每个系列的最小,最大和平均值。在传说中不是“必须”,但它会非常好。另一个解决方案可能是在图表中(在该点)显示最小值,最大值和实际值,这也是一个非常好的解决方案。在不同的图表中,系列的数量从1-4开始变化。
实际值(或实际的最新值)已在图例中。
此外,我希望在首次加载和更改缩放时“始终”更新这些值。当改变缩放时,它应该基于选择,因此当选择“1米”时,它必须显示上个月的值,依此类推。
http://jsfiddle.net/dg4wpg0t/1/
感谢任何帮助:)
Highcharts.stockChart('container', {
chart: {
zoomType: 'x'
},
legend: {
enabled: true,
labelFormatter: function() {
var lastVal = this.yData[this.yData.length - 1];
return this.name + '<br>' + 'Now: ' + lastVal + ' °C';
}
},
series: [{
name: 'Outside',
data: [
[Date.UTC(2016, 01, 01), 0.2],
[Date.UTC(2016, 01, 06), -1.4],
[Date.UTC(2016, 01, 11), -2.6],
[Date.UTC(2016, 01, 16), 11.1],
[Date.UTC(2016, 01, 21), -11.1],
[Date.UTC(2016, 01, 26), 3.7],
[Date.UTC(2016, 02, 01), 4.9],
[Date.UTC(2016, 02, 06), 8.2],
[Date.UTC(2016, 02, 11), 0.2],
[Date.UTC(2016, 02, 16), -1.4],
[Date.UTC(2016, 02, 21), -2.6],
[Date.UTC(2016, 02, 26), -5.1],
[Date.UTC(2016, 03, 01), -8.3],
[Date.UTC(2016, 03, 06), 3.7],
[Date.UTC(2016, 03, 11), 4.9],
[Date.UTC(2016, 03, 16), 5.2],
[Date.UTC(2016, 03, 21), 0.2],
[Date.UTC(2016, 03, 26), -1.4],
[Date.UTC(2016, 04, 01), -2.6],
[Date.UTC(2016, 04, 06), -5.1],
[Date.UTC(2016, 04, 11), -8.3],
[Date.UTC(2016, 04, 16), 11.2],
[Date.UTC(2016, 04, 21), -11.2],
[Date.UTC(2016, 04, 26), 5.2]
]
}, {
name: 'Inside',
data: [
[Date.UTC(2016, 01, 01), 17.8],
[Date.UTC(2016, 01, 06), 27.1],
[Date.UTC(2016, 01, 11), 17.1],
[Date.UTC(2016, 01, 16), 21.7],
[Date.UTC(2016, 01, 21), 25.3],
[Date.UTC(2016, 01, 26), 24.3],
[Date.UTC(2016, 02, 01), 22.3],
[Date.UTC(2016, 02, 06), 24.1],
[Date.UTC(2016, 02, 11), 19.8],
[Date.UTC(2016, 02, 16), 20.2],
[Date.UTC(2016, 02, 21), 26.5],
[Date.UTC(2016, 02, 26), 21.7],
[Date.UTC(2016, 03, 01), 25.3],
[Date.UTC(2016, 03, 06), 24.3],
[Date.UTC(2016, 03, 11), 22.3],
[Date.UTC(2016, 03, 16), 24.1],
[Date.UTC(2016, 03, 21), 19.8],
[Date.UTC(2016, 03, 26), 20.2],
[Date.UTC(2016, 04, 01), 24.5],
[Date.UTC(2016, 04, 06), 21.7],
[Date.UTC(2016, 04, 11), 27.2],
[Date.UTC(2016, 04, 16), 17.2],
[Date.UTC(2016, 04, 21), 22.3],
[Date.UTC(2016, 04, 26), 24.1]
]
}]
});
答案 0 :(得分:3)
您需要在图表开始(加载事件)和redraw event上进行计算。您可以禁用数据分组 - 对于您拥有的数据量,不需要数据分组 - 禁用它可以简化数据获取。
功能:
function calculateStatistics() {
this.series.slice(0, 2).forEach(series => { // take only two first series, the last is for the navigator
const data = series.data.filter(point => point.isInside).map(point => point.y); // grab only points within the visible range
// calculate statistics for visible points
const statistics = [
data[data.length - 1],
Math.max.apply(null, data),
Math.min.apply(null, data),
(data.reduce((a, b) => a + b, 0) / data.length).toFixed(1)
];
const legendItem = series.legendItem;
let i = -1;
// construct the legend string
const text = legendItem.textStr.replace(/-?\d+\.\d/g, () => statistics[++i]);
// set the constructed text for the legend
legendItem.attr({
text: text
});
});
}
并在事件上设置功能
chart: {
zoomType: 'x',
events: {
load: calculateStatistics,
redraw: calculateStatistics
}
},
样式文本可以在legend.labelFormatter
中完成