注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于html5的非常好用的统计图表插件chart.js

jQuery插件 fishcity 3462浏览

一款基于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);

以上代码就是基本的使用方法,其中data是必选的参数,options是可选的配置参数。下面我们来看下例子中的图表写法。

html代码建立了6个canvas标签,这6个标签就是准备给描入图形的,其它的标签只是布局或说明作用。

<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);

ok,完成以上工作,漂亮的统计图形就出现了。

插件适用于所以有支持html5的主流浏览器,但是IE8以下版本的就需要借助explorercanvas插件才能使用了。

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

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

好了,完成这个就可以完美的在所有浏览器上使用了。

转载请注明:jQ酷 » 基于html5的非常好用的统计图表插件chart.js

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。