您的位置：首页 > Web前端 > JavaScript

Chart.js绘图,数据图

2016-04-08 17:05 513 查看
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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航