lycorisradiata

Chart.js图表工具
安装你可以从GitHub版本下载最新版本的Chart.js 或使用Chart.js CDN。可以在安装页面上找到详...
扫描右侧二维码阅读全文
27
2018/11

Chart.js图表工具

安装

你可以从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轴的起始值   
            });

效果如图:
123.png
更多的图表使用方法见官方文档:官方文档

Last modification:November 30th, 2018 at 04:07 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment