#学习笔记#(45)Chart.js曲线图

最新推荐文章于 2021-06-28 22:22:25 发布

游走走

最新推荐文章于 2021-06-28 22:22:25 发布

阅读量1k

点赞数

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50732590

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

曲线图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF8">
    </head>
    <body>
        <canvas id="mychart1" width="600px" height="400px"></canvas>
        <script src="Chart.js"></script>
        <script>
            var options={
                //这个Boolean - If we show the scale above the chart data好像是图表数据特别多的时候起作用？？
                scaleOverlay : false,
                //是否使用自定义图表样式,只有当值为true时，scaleSteps/scaleStepWidth/scaleStartValue才有效
                scaleOverride:false,
                //图表纵轴的行数
                scaleSteps:10,
                //每行的宽度
                scaleStepWidth:30,
                //纵轴起点值
                scaleStartValue:0,
                //图表轴的颜色
                scaleLineColor:"#696969",
                //坐标轴宽度
                scaleWidth:1,
                //是否显示纵轴的数值
                scaleShowLabels:true,
                //这句并不知道有什么卵用 ：Interpolated JS string - can access value
                scaleLabel : "<%=value%>",
                //坐标轴字体
                scaleFontFamily:"Arial",
                //坐标轴字体大小
                scaleFontSize:12,
                //坐标轴字体粗细,bold,normal,border,lighter或100-900
                scaleFontStyle:"bold",
                //坐标轴字体颜色
                scaleFontColor:"#ccc",
                //是否显示网格线
                scaleShowGridLines:true,
                //网格线颜色
                scaleGridLinesColor:"#ccc",
                //网格线宽度
                scaleGridLineWidth:1,
                //是否显示为曲线
                bezierCurve:true,
                //是否显示线上的点
                pointDot:true,
                //点半径，单位px
                pointDotRadius:3,
                //点的边框宽度
                pointDotStrokeWidth:1,
                //这个并不知道有什么卵用：Boolean - Whether to show a stroke for datasets
                datasetStroke:true,
                //线的宽度
                datasetStrokeWidth:2,
                //线和坐标轴包围的地方是否填充颜色
                datasetFill:true,
                //是否显示动画
                animation:true,
                //动画分多少步完成
                animationSteps:100,
                /*动画过度效果:linear,easeInQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInElastic,easeOutElastic,easeInOutElastic,easeInBack,easeOutBack,easeInOutBack,easeInBounce,easeOutBounce,easeInOutBounce*/
                animationEasing:"easeInOutBounce",
                //动画进行中执行
                //onAnimationProgress:null;//funtion(){}
                //动画结束后执行
                //onAnimationComplete:null;//function(){}
            };
            var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {//后面的曲线
                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 ctx = document.getElementById("mychart1").getContext("2d");
            new Chart(ctx).Line(data,options);
        </script>
    </body>
</html>

游走走

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#学习笔记#(45)Chart.js曲线图

曲线图 var options={ //这个Boolean - If we show the scale above the chart data好像是图表数据特别多的时候起作用？？ scaleOverl
复制链接

扫一扫