js 统计图插件chart.js

chart是一个纯js插件，它功能强大小巧使用也很简单。

第一步引入 chart.js 。

第二步绘制控件样式可以自己定义但是id不能改变

第三步配置参数//如果是多条数据对比，就复制多个datasets 用逗号隔开但是datasets 的值data 要传递不一样的

var lineChartData = {
labels :monthYear,//labels 就是x轴的参数比如说201601，201602之类的是一个 js数组记住一定是js String数组
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 : userCnt2//这是y轴的参数是确切的值比如说201602月分生产值为30000件这是一个js 数值数组
}
]
};

第四步调用函数

//曲线图
function diagram(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
};

//柱状图
function barChart(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Bar(lineChartData, {
responsive: true
});
};

需要用哪个统计图直接调用

//柱状图

barChart();//这样就可以了

另外关于java list 赋值个js数组的方法，我循环list 把我需要的字段拼接我String逗号隔开然后传到页面

巴特西

js 统计图插件chart.js

最新文章

热门文章