Chart.js的简单实用_chartjs 设置图表的透明度-CSDN博客

本文链接：https://blog.csdn.net/a3025056/article/details/52073030

准备开始工作，学习了一下chart.js，还是比较容易上手的，下面给大家介绍一下。

曲线图作为案例：

实例化Chart对象：

数据设置：

var data = {
           labels : ["一月","二月","三月","四月","五月","六月","七月"],
           datasets : [
                        {
                           /*
                           * R：红色值。正整数 | 百分数

                               G：绿色值。正整数 | 百分数

                               B：蓝色值。正整数| 百分数

                               A：透明度。取值0~1之间
                           * */
                           fillColor : "rgba(220,220,220,0.5)",//填充颜色
                           strokeColor : "rgba(220,220,220,1)",//边框颜色
                           pointColor : "rgba(220,220,220,1)",//点的颜色
                           pointStrokeColor : "#fff",//点的边框颜色
                           data : [65,59,90,81,56,55,40]//输入的数据
                        },
                        {
                           fillColor : "rgba(151,187,205,0.5)",
                           strokeColor : "rgba(151,187,205,1)",
                           pointColor : "rgba(151,187,205,1)",
                           pointStrokeColor : "#fff",
                           data : [28,48,40,19,96,27,100]
                        }
                        ]
   }

图标选项设置：

var options = {//这是默认的
        // 网格线是否在数据线的上面
        scaleOverlay : false,

        // 是否用硬编码重写y轴网格线
        scaleOverride : false,

        // y轴刻度的个数
        scaleSteps : null,

        // y轴每个刻度的宽度
        scaleStepWidth : null,

        // y轴的起始值
        scaleStartValue : null,

        // x轴y轴的颜色
        scaleLineColor : "rgba(0,0,0,1)",


        // x轴y轴的线宽
        scaleLineWidth : 1,

        // 是否显示y轴的标签
        scaleShowLabels : true,


        // 标签显示值
        scaleLabel : "<%=value%>",


        // 标签的字体
        scaleFontFamily : "'Arial'",


        // 标签字体的大小
        scaleFontSize : 12,


        // 标签字体的样式
        scaleFontStyle : "normal",


        // 标签字体的颜色
        scaleFontColor : "#666",

        // 是否显示网格线
        scaleShowGridLines : true,

        // 网格线的颜色
        scaleGridLineColor : "rgba(0,0,0,.1)",


        // 网格线的线宽
        scaleGridLineWidth : 1,

        // 是否是曲线
        bezierCurve : true,

        // 是否显示点
        pointDot : true,

        // 点的半径
        pointDotRadius : 3,

        // 点的线宽
        pointDotStrokeWidth : 1,

        datasetStroke : true,

        // 数据线的线宽
        datasetStrokeWidth : 3,

        // 数据线是否填充颜色
        datasetFill : true,

        // 是否有动画效果
        animation : true,

        // 动画的步数
        animationSteps : 60,

        // 动画的效果
        animationEasing : "easeOutQuart",

        // 动画完成后调用
        onAnimationComplete : null,