zoukankan      html  css  js  c++  java
  • 从头开始学习chart.js图表绘制工具

    最近网站需要加入图标效果图,于是我就开始学习并实验如何使用chart.js这个插件.

    简单介绍一下chart.js这个插件。chart是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。(http://www.bootcss.com/p/chart.js/)。

    首选,我先引用chart.js

    <script src="Chart.js"></script>

    接下来,创建图表

    为了创建图表,我们需要实例化一个Chart对象。为此,需要传入一个绘制图表的2d context。

    html

    <div style="400px;height:400px;">
      <canvas id="myChart" width="100%" height="100%"></canvas>
    </div>
    提示:这段代码是有点小问题的,因为是自己摸索的写的,下文有正确的

    javascript(以曲线图为例)

    <script>
    //Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    //曲线图 Line chart
    var myNewChart = new Chart(ctx).Line(data,options);
    </script>

    写到此时,测试了一下,发现好多错T_T

    首选,<canvas id="myChart" width="100%" height="100%">,创建的图表区域不是预计的400*400,

    其次,浏览器提示错误

    然后开始查错:.........T..^..T...........

    结果发现:

    1.html 当options为{responsive: true}div设置的是图表的大小,canvas里的width与height只是宽高比而已,并且,已div的宽度为标准;100%只会让图表显示100px而已。(注:responsive: true,自适应)

    2.script 里的(data,options)没有设置会引起的错误.

    那么,再来重新写一次html吧

    <div style="300px;">
        <canvas id="myChart" width="1" height="1"></canvas>
    </div>

    接下来script

    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx).Line(data,{responsive: true});

     然后添加数据[script](注:数据在之前);

    以下数据为曲线图数据结构:(附参数说明)

    var data = {
                labels : ["January","February","March","April","May","June","July"],//X轴 坐标
                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]//Y轴 坐标
                    },
                    {
                        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 Linedefaults = {
                //Boolean - If we show the scale above the chart data
                scaleOverlay:false,
    
                //Boolean -If we want to override with a hard coded scale
                scaleOverride:false,
    
                //** Required if scaleOverride is true ** **如果scaleOverride是真的**
                //Number - The number of steps in a hard coded scale
                scaleSteps:null,
                //Number - THe value jump in the hard coded scale 数量,规模激增硬编码的值
                scaleStepWidth:20,
                //Number - The scale strrting valueY轴的起始值
                scaleStartValue:null,
    
                //String -Colour of the scale lineY/X轴的颜色
                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:false,
    
                //Interpolated JS string - can access value Y轴上的刻度,即文字
                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,.05)",
    
                //Number - Width of the grid lines 网格宽度
                scaleGridLineWidth:1,
    
                //Boolean - Whether the line is curved between points 是否使用贝塞尔曲线?即:线条是否弯曲
                bezierCurve:true,
    
                //Boolear - Whether to show a dot for eache point  是否显示点数
                pointDot:true,
    
                //Number - Radius of eache 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:2,
    
                //Boolean -Whether to fill the dataset withe 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
            };

    初步学习到此结束。

     

  • 相关阅读:
    RPC服务和HTTP服务对比
    常用工具地址
    maven教程
    【springboot】知识点总结
    [JZOJ4272] [NOIP2015模拟10.28B组] 序章-弗兰德的秘密 解题报告(树形DP)
    [NOIP2015模拟10.22] 最大子矩阵 解题报告(单调栈)
    [NOIP2015模拟10.27] 挑竹签 解题报告(拓扑排序)
    [NOIP2015模拟10.27] [JZOJ4270] 魔道研究 解题报告(动态开点+权值线段树上二分)
    [NOIP2015模拟10.22] 最小代价 解题报告 (最小生成树)
    BZOJ4479 [JSOI2013] 吃货jyy 解题报告(三进制状态压缩+欧拉回路)
  • 原文地址:https://www.cnblogs.com/myflowers/p/4728081.html
Copyright © 2011-2022 走看看