Chart.js 基本用法

最近在写一个小项目，需要用图表统计，第一个想到的就是Chart.js，在网上搜索了 很久没有找到合适的资源，github上资源又很慢，花了很长时间才下载到，现在贡献出来。

Chart.js 2.9.3 链接: https://pan.baidu.com/s/1sGYvIMpanzwQjvzv6wBHaA 提取码: m6jc

如果你需要其他版本的可以去github上自己下载.。地址 https://github.com/chartjs/Chart.js。
一定要注意不可以下载master版本，里面没有你要的js文件只有例子和文档。需要如下图所示选择你们需要的版本。

图片.png

基本用法:
在你的HTML页面中引用Chart.js

图片.png

创建图表显示的画布

图片.png

最后

图片.png

图片.png

在我的代码中，给画布赋值的代码是由php来完成的；
php代码如下图:

图片.png

在这段时间中发现有的时候，chart的一些功能不能用，说明我们js的版本不对。我之前下载了一个未知的版本，可以生成图表，但是鼠标滑过没有point点没有提示。

最后附上一个在网上找来的设置中文注释。
var options = {
//Boolean - If we show the scale above the chart data
// 网格线是否在数据线的上面
scaleOverlay : false,

    //Boolean - If we want to override with a hard coded scale
    // 是否用硬编码重写y轴网格线
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    // y轴刻度的个数
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    // y轴每个刻度的宽度
    scaleStepWidth : null,
    //Number - The scale starting value
    // y轴的起始值
    scaleStartValue : null,

    //String - Colour of the scale line    
    // x轴y轴的颜色
    scaleLineColor : "rgba(0,0,0,1)",
    
    //Number - Pixel width of the scale line
    // x轴y轴的线宽    
    scaleLineWidth : 1,

    //Boolean - Whether to show labels on the scale    
    // 是否显示y轴的标签
    scaleShowLabels : true,
    
    //Interpolated JS string - can access value
    // 标签显示值
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    // 标签的字体
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    // 标签字体的大小
    scaleFontSize : 12,
    
    //String - Scale label font weight style
    // 标签字体的样式
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    // 标签字体的颜色
    scaleFontColor : "#666",    
    
    ///Boolean - Whether grid lines are shown across the chart
    // 是否显示网格线
    scaleShowGridLines : true,
    
    //String - Colour of the grid lines
    // 网格线的颜色
    scaleGridLineColor : "rgba(0,0,0,.1)",
    
    //Number - Width of the grid lines
    // 网格线的线宽
    scaleGridLineWidth : 1,    
    
    //Boolean - Whether the line is curved between points
    // 是否是曲线
    bezierCurve : true,
    
    //Boolean - Whether to show a dot for each point
    // 是否显示点
    pointDot : true,
    
    //Number - Radius of each point dot in pixels
    // 点的半径
    pointDotRadius : 3,
    
    //Number - Pixel width of point dot stroke
    // 点的线宽
    pointDotStrokeWidth : 1,
    
    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,
    
    //Number - Pixel width of dataset stroke
    // 数据线的线宽
    datasetStrokeWidth : 3,
    
    //Boolean - Whether to fill the dataset with a colour
    // 数据线是否填充颜色
    datasetFill : true,
    
    //Boolean - Whether to animate the chart
    // 是否有动画效果
    animation : true,

    //Number - Number of animation steps
    // 动画的步数
    animationSteps : 60,
    
    //String - Animation easing effect
    // 动画的效果
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    // 动画完成后调用
    onAnimationComplete : null
}