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

第一步引入 chart.js 。

<script type="text/javascript" src="<%=path%>/js/mapping/Chart.js"></script>

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

 <canvas id="canvas"  height="600" width="800"></canvas>

第三步配置参数//如果是多条数据对比，就复制多个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逗号隔开然后传到页面 

var month='${month}';//年月

var monthYear=month.split(",");//年月 String数组

var cnt='${cnt}';

var userCnt=cnt.split(",");//数量 String 数组

var userCnt2=new Array(); ;//声明一个空白数组

for ( var i = 0; i< userCnt.length; i++) {

userCnt2[i]=parseInt(userCnt[i]);//赋值 转换为数值数组

}