极客观点
项目管理
HarmonyOS
Chart.js是bootStrap官网上相关优质项目推荐的js控件。
在使用Chart.js时，如果数据多，横坐标就会把所有点的label数据全部写出来，但在有限的范围内，全部显示出来就会很难看了，特别在手机浏览器上。请问有什么方法可以省略部分label的显示。
可参考：
1. bootStrap官网(http://www.bootcss.com/)
2. chart.js说明文档(http://www.bootcss.com/p/chart.js/)
下面是我做了点小修改的DEMO:(随机生成数据)
<!doctype html>
<html>
<head>
<title>My Line Chart</title>
<script src="../Chart.js"></script>
</head>
<body>
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomInt = Math.round(Math.random()*100);
var labels=[];
for(var i=0;i<randomInt;i++){
labels[i]="a"+i;
}
var randomDate = function(){
var datas=[];
for(var i=0;i<randomInt;i++){
datas[i]=randomScalingFactor();
}
return datas;
};
var lineChartData = {
labels : labels,
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : randomDate()
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : randomDate()
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
//false
responsive: true
});
}
</script>
</body>
</html>
PS:如果有其他更好的基于bootStrap的js控件就推荐一下。
设置这个