D丶个人博客



用 chart.js 创建漂亮图表 (HTML绘制工具库)-chart.js :开源免费图表组件,HTML绘制工具库 | D丶个人博客

用 chart.js 创建漂亮图表 (HTML绘制工具库)

chart.js :开源免费图表组件,HTML绘制工具库


chart.js :开源免费图表组件,HTML绘制工具库

chart.js源码:https://github.com/nnnick/Chart.js

chart.js 英文文档:http://www.chartjs.org/docs/ (建议看英文手册)

chart.js 中文文档:http://www.bootcss.com/p/chart.js/docs/

先引入js文件,创造图表

<script src="Chart.min.js"></script>
<div style="width:400px;height:400px;">
    <canvas id="myChart"></canvas>
</div>


曲线图JS代码(可以选择几条数据对比,也可以选择一条,背景颜色,线颜色都可以改,详情看手册)

var ctx = document.getElementById("myChart").getContext('2d');
var data = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{	
			label:'2017',
			backgroundColor:'rgba(40,161, 121, 0.1)',
			data : [65,59,90,81,56,55,40]
		},
		{	
			label:'2016',
			backgroundColor:'rgba(140,111, 121, 0.1)',
			data : [28,48,40,19,96,27,100]
		},
	],
	borderColor:"rgba(151,187,205,1)"
}
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                tension: 0,
            }]
        }
    }
});


效果图:

20170822172242036.png

可以点击筛选,显示单条数据

20170822172344955.png

把  type: 'line',改成  type: 'bar',就是柱状图:

20170823094455092.png

把 type 改成 radar,就是 雷达图(蛛网图):

20170823094809448.png

把 type 改成 polarArea,就是极地区域图:

20170823095202565.png

JS改成:    显示环形图

var data = {
	labels: [
        "February","March","April"
    ],
	datasets: [{
        data: [10, 20, 30],
        backgroundColor:["lightblue","lightgreen","#999999"]
    }],
 
	
}
var myLineChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
});

20170823101127133.png

把环形图的type改成 pie 就是饼图

20170823101430843.png

所有图形介绍完毕,用于简单的 图表完全够用。



评论


About ME

about me

程序猿

热爱生活的程序猿 ,QQ:519395243

我要这天,再遮不住我眼,要这地,再埋不了我心,要这众生,都明白我意,要那诸佛,都烟消云散。 ​​​​

Contact ME

QQ:519395243

TAG cloud

友情链接