Chart.js绘图,数据图

来源：互联网发布：淘宝裘皮编辑：程序博客网时间：2024/05/10 18:17

Chart.js绘图,数据图

首先下载需要引用的Chart.js文件

https://github.com/nnnick/Chart.js

也可以把整个文件夹都下载到本地，里面包含了一些demo

<html><head><meta charset="utf-8"><script type="text/javascript" src="js/chart/Chart.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引用到位就ok了，其他的根据自己需求来更改图标效果

Chart.js中文文档

http://www.bootcss.com/p/chart.js/docs/

0 0