chart.js

Posted 2020-09-16 sunZL

一款基于html5的统计图片插件，它可以简单快捷的制作出多种形状的非常漂亮且直观的统计图，当然，这么实用的工具必须得支持主流的浏览器，后面会说到如何让低版的浏览器也支持。在这里还有一点说明，jQ酷只做与jquery相关的插件或文章，但这个让我破例了，因为它太强大了，虽与jquery没有半毛钱的关系，但还是要拿出来和大家分享下，下面我们来开始使用它。

引入Chart.js

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

建立html

<canvas id="myChart" width="400" height="400"></canvas>

写入js

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

取得html中的myCchar元素，用2d的方式写入数据，并以极状图展现。当然这里也可以用jquery插件来写入

//Get context with jQuery - using jQuery‘s .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
new Chart(ctx).PolarArea(data,options);

html代码建立了6个canvas标签，这6个标签就是准备给描入图形的，其它的标签只是布局或说明作用。以上代码就是基本的使用方法，其中data是必选的参数，options是可选的配置参数。下面我们来看下例子中的图表写法。

<ul>
      <li>
        <canvas id="doughnut" ></canvas>
        <p>1、环状图</p>
      </li>
      <li>
        <canvas id="line" ></canvas>
        <p>2、折线图</p>
      </li>
      <li>
        <canvas id="polarArea" ></canvas>
        <p>3、极状图</p>
      </li>
      <li>
        <canvas id="bar" ></canvas>
        <p>4、柱形图</p>
      </li>
      <li>
        <canvas id="pie" ></canvas>
        <p>5、饼图</p>
      </li>
      <li>
        <canvas id="radar" ></canvas>
        <p>6、雷达图</p>
      </li>
</ul>    

　　

JS部分为两大部分，第一部分为每一个图形定义颜色，数据，第二部分调用插件，实例化对象，描出图形。代码作了简要注释，请细看。更具体的参数选项请查看官方帮助文档。

var doughnutData = [ //环状图
    {
        value: 30,   //数值，如黄瓜30个
        color:"#F7464A" //颜色
    },
    {
        value : 50, //数值，如青瓜50个，下面的以此类推
        color : "#46BFBD"
    },
    {
        value : 100,
        color : "#FDB45C"
    },
    {
        value : 40,
        color : "#949FB1"
    },
    {
        value : 120,
        color : "#4D5360"
    }
];
var lineChartData = { //折线图
    labels : ["","","","","","",""],
    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 pieData = [ //饼状图
    {
    value: 30,
    color:"#F38630"
    },
    {
    value : 50,  //数值
    color : "#E0E4CC" //颜色
    },
    {
    value : 100,
    color : "#69D2E7"
    }
             
];
var barChartData = { //柱形图
labels : ["January","February","March","April","May","June","July"], //x轴标签
datasets : [
        {
        fillColor : "rgba(220,220,220,0.5)", //柱子填充色
        strokeColor : "rgba(220,220,220,1)", //柱子边框色
        data : [65,59,90,81,56,55,40] //数据，Y轴
        },
        {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [28,48,40,19,96,27,100]
        }
    ]
             
};
var chartData = [ //极状图
    {
    value : Math.random(), //随机获取数值
    color: "#D97041"  //填充颜色
    },
    {
    value : Math.random(),
    color: "#C7604C"
    },
    {
    value : Math.random(),
    color: "#21323D"
    },
    {
    value : Math.random(),
    color: "#9D9B7F"
    },
    {
    value : Math.random(),
    color: "#7D4F6D"
    },
    {
    value : Math.random(),
    color: "#584A5E"
    }
];
var radarChartData = { //雷达图
    labels : ["","","","","","",""], //项标签
    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]
    }
    ]
             
};
    //调用插件，把数值以2d的方式描到对应元素中
new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);

　　

插件适用于所以有支持html5的主流浏览器，但是IE8以下版本的就需要借助explorercanvas插件才能使用了。ok，完成以上工作，漂亮的统计图形就出现了。

可以用以下方式来调用，避免高版本的浏览器也加载了。

<!--[if lte IE 8]>
<script src="excanvas.js"></script>
<![endif]-->

　　

转载请注明：jQ酷 ? 基于html5的非常好用的统计图表插件chart.js好了，完成这个就可以完美的在所有浏览器上使用了。