安装

你可以从GitHub版本下载最新版本的Chart.js 或使用Chart.js CDN。可以在安装页面上找到详细的安装说明。

创建图表

由于项目中用的都是动态数据，下面将以商品价格表为例来创建折线图。Y轴表示商品价格，X轴日期。下面将创建一个id名为canvas的画布。
1.html 代码：

  <canvas id="canvas" ></canvas>

2.获取数据画图
先我们需要将后台传过来的时间戳转化成日期

     // 格式化时间数据
     Date.prototype.formatMMDDYYYY = function() {
            return (this.getMonth() + 1) +
            "/" +  this.getDate() +
            "/" +  this.getFullYear();
     }

再把数据做下处理

      var labels = [], datas=[];
      var items = data.data;
      for(var i in items){
           labels.push(new Date(items[i].updateDate).formatMMDDYYYY());
           datas.push(parseFloat(items[i].itemsPrice/100).toFixed(2));
      }

这里做了个优化，由于价格的大小不是固定的波动幅度不是那么大，如果Y轴价格从0开始不是很合理，所以我们取了最大值，和最小值，重新编写了Y轴网线。

            var max = Math.max.apply(null,datas);         //获取价格数组中最大值
            var min = Math.min.apply(null,datas);        //获取价格数组中最小值
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillRect(10, 10, 20, 20);
            ctx.height=100;
            var lineChartData = {
                labels:  labels,
                datasets: [{
                    fillColor: "rgba(75,192,192,0)",        //背景填充色
                    strokeColor: "rgba(75,192,192,1)",      //路径颜色
                    pointColor: "rgba(255,255,255,1)",      //数据点颜色
                    pointStrokeColor: "rgba(75,192,192,1)",//数据点边框颜色
                    data:  datas,
                }]

            }
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: true,
                scaleOverride :true ,          //是否用硬编码重写y轴网格线
                scaleSteps : 5,                //y轴刻度的个数
                scaleStepWidth : (max-min)/5,  //y轴每个刻度的宽度
                scaleStartValue : min,        //y轴的起始值   
            });

效果如图：

更多的图表使用方法见官方文档：官方文档