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

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

2015-11-08 16:22 471 查看

参考：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的文件路径正确！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航