chart.js绘制精美的数据化图形--入门示例

来源：互联网发布：sql server 笛卡尔积编辑：程序博客网时间：2024/06/03 19:38

参考：http://think.zvan.com.cn/code/js/2014/0607/247.html

这个库基于html5，在360极速浏览器和firefox中测试通过。

<html><head><meta charset="utf-8"><script type="text/javascript" src="js/chart/Chart.min.js"></script></head><body><canvas id="canvas" height="450" width="600"></canvas><script type="text/javascript">var ctx = new Chart(document.getElementById("canvas").getContext("2d"));var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};// 线型图var LineChart = {labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],datasets: [{fillColor: "rgba(151,249,190,0.5)",strokeColor: "rgba(255,255,255,1)",pointColor: "rgba(220,220,220,1)",pointStrokeColor: "#fff",data: [10, 20, 30, 40, 50]}, {fillColor: "rgba(252,147,65,0.5)",strokeColor: "rgba(255,255,255,1)",pointColor: "rgba(173,173,173,1)",pointStrokeColor: "#fff",data: [28, 68, 40, 19, 96]}]};var myLineChart = ctx.Line(LineChart, options);// 条形图var BarChart = {labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],datasets: [{fillColor: "rgba(151,249,190,0.5)",strokeColor: "rgba(255,255,255,1)",data: [13, 20, 30, 40, 50]}, {fillColor: "rgba(252,147,65,0.5)",strokeColor: "rgba(255,255,255,1)",data: [28, 68, 40, 19, 96]}]};//var myBarChart = ctx.Bar(BarChart, options);// 饼状图var pieChart = [{value: 40, color: "#fcc79c"},{value: 30, color: "#beefd2"},{value: 90, color: "#ffddfb"},];//var myPieChart = ctx.Pie(pieChart);// 环状图var doughnutChart = [{value: 60, color: "#fcc79e"},{value: 30, color: "#beefd2"},{value: 50, color: "#ffddfb"},{value: 120, color: "#cdecff"},{value: 90, color: "#fff5bc"}];//var myRingChart = ctx.Doughnut(doughnutChart);</script></body></html>

保证chart.js的文件路径正确！

0 0