用 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, }] } } });
效果图:
可以点击筛选,显示单条数据
把 type: 'line',改成 type: 'bar',就是柱状图:
把 type 改成 radar,就是 雷达图(蛛网图):
把 type 改成 polarArea,就是极地区域图:
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, });
把环形图的type改成 pie 就是饼图
所有图形介绍完毕,用于简单的 图表完全够用。