Javascript 如何在Highcharts中显示多个“dataMax”?
目前,我在折线图中显示了一个最大点。但我想将dataMax更改为图表中的前5个最大值点。如何在Highcharts中实现这一点Javascript 如何在Highcharts中显示多个“dataMax”?,javascript,highcharts,Javascript,Highcharts,目前,我在折线图中显示了一个最大点。但我想将dataMax更改为图表中的前5个最大值点。如何在Highcharts中实现这一点 var defaultData = 'urlto.csv'; var urlInput = document.getElementById('fetchURL'); var pollingCheckbox = document.getElementById('enablePolling'); var pollingInput = document.getElementB
var defaultData = 'urlto.csv';
var urlInput = document.getElementById('fetchURL');
var pollingCheckbox = document.getElementById('enablePolling');
var pollingInput = document.getElementById('pollingTime');
function createChart() {
Highcharts.chart('closed5', {
chart: {
type: 'area',
zoomType: 'x'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {},
formatter: function() {
if (this.y === this.series.dataMax) {
return this.y;
}
}
}
}
},
title: {
text: 'Chart for charting'
},
data: {
csvURL: urlInput.value,
enablePolling: pollingCheckbox.checked === true,
dataRefreshRate: parseInt(pollingInput.value, 10)
}
});
if (pollingInput.value < 1 || !pollingInput.value) {
pollingInput.value = 1;
}
}
urlInput.value = defaultData;
// We recreate instead of using chart update to make sure the loaded CSV
// and such is completely gone.
pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart;
// Create the chart
createChart();
正如@ewolden正确地注意到的,您可以对数据进行排序,并仅显示五个最高值:
var data = [11, 22, 33, 44, 55, 66, 15, 25, 35, 45, 55, 65],
sortedData = data.slice().sort(function(a, b){
return b - a
});
Highcharts.chart('container', {
series: [{
data: data,
dataLabels: {
enabled: true,
formatter: function() {
if (sortedData.indexOf(this.y) < 5) {
return this.y;
}
}
}
}]
});
现场演示:
API:据我所知,格式化程序回调是格式化数据标签的方法。如果要显示前N个点,应在新数组中对数据进行排序,并提取前5个值。这是一个如何克隆和排序数组以及提取格式化程序调用中前5个元素的示例
让数据=[32,10,20,99,30,54,85,56,11,26,15,45,55,65];
//复制数组
设temp=data.slice;
//按降序排列临时数组
温度排序,b=>b-a;
高位图表。图表“关闭5”{
图表:{
类型:'区域',
zoomType:'x'
},
标题:{
文本:“用于绘制图表的图表”
},
系列:[{
数据:数据,
数据标签:{
启用:对,
格式化程序:函数{
如果温度指数y小于5{
把这个还给我;
}
},
},
}]
};
没有显示前N个点的内置函数。相反,您必须对感兴趣的数据进行排序,并选择5个最大值。可以在加载到highcharts之前、期间或之后完成。