所以这是我的问题。
我有一个条形图(顶部的图表(,我有一大堆未排序的元素。我的目标是把元素列表交给要排序的图表,只给我前10个元素(排序(。
这是一个代码摘要:
Array = [[User 1, 25],[User 2, 45],[User 3, 11],etc...]
我试着在Axis X
上设置一个最大值,如下所示:
var chart_top_user = new CanvasJS.Chart("chartContainer_top_user", {
animationEnabled: true,
axisX:{
maximum: 10,
interval: 1
},
但它只显示了给定的前10个元素(未排序(。有人能告诉我Canvajs
是否可以做到这一点吗?或者我必须自己对列表进行排序和限制吗?
抱歉我英语不好。我尽量做到完整。
感谢大家抽出时间:-(
CanvasJS不会对您传递给它的数据点进行排序,它只是按照您传递的序列进行渲染。您可以对它进行排序,在传递到图表选项之前只获得前10名用户。查看下面的示例。
var dps = [
{ label: "User 1", y: 610 },
{ label: "User 2", y: 680 },
{ label: "User 3", y: 690 },
{ label: "User 4", y: 700 },
{ label: "User 5", y: 710 },
{ label: "User 6", y: 658 },
{ label: "User 7", y: 734 },
{ label: "User 8", y: 963 },
{ label: "User 9", y: 847 },
{ label: "User 10", y: 853 },
{ label: "User 11", y: 869 },
{ label: "User 12", y: 943 },
{ label: "User 13", y: 970 },
{ label: "User 14", y: 869 },
{ label: "User 15", y: 890 },
{ label: "User 16", y: 930 },
{ label: "User 17", y: 850 },
{ label: "User 18", y: 905 },
{ label: "User 19", y: 980 },
{ label: "User 20", y: 858 },
{ label: "User 21", y: 734 },
{ label: "User 22", y: 963 },
{ label: "User 23", y: 847 },
{ label: "User 24", y: 853 },
{ label: "User 25", y: 869 },
{ label: "User 26", y: 943 },
{ label: "User 27", y: 970 },
{ label: "User 28", y: 869 },
{ label: "User 29", y: 890 },
{ label: "User 30", y: 930 },
{ label: "User 31", y: 750 }
];
var top10Dps = getHighestValues(dps, 10);
//var top10Dps = dps;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Website Traffic"
},
axisY: {
//includeZero: true
},
data: [{
type: "line",
dataPoints: top10Dps
}]
});
chart.render();
function getHighestValues(dps, num){
var topDps = [...dps].sort((a, b) => b.y - a.y).slice(0, num);
return topDps;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 180px; width: 100%;"></div>