HTML5 - 好用的Canvas图表库介绍（RGraph与ZingChart）
作者：hangge | 2016-02-18 08:45
下面介绍两个基于HTML5的canvas标签，采用Javascript绘制的图表库：RGraph 与 ZingChart。
（1）简单的线图
（2）3D柱状图
2，ZingChart
ZingChart也是一个优秀的基于 HTML5 Canvas 开发的图表库。支持鼠标交互及数据钻取。
1，RGraph
RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。
主页地址：www.rgraph.net
当前支持的图表类型包括：
bar、pie、donut、gantt、radar、funnel、bi-polar charts
line and scatter graphs
LED display
meter
odometer
progress bar
（1）简单的线图
<!DOCTYPE html>
<html>
<head>
<title>hangge.com</title>
<meta charset="UTF-8">
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
</head>
<body>
<canvas id="cvs" width="500" height="200">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var line = new RGraph.Line({
id: 'cvs',
data: [84,76,79,84,86,52,53],
options: {
hmargin: 5,
tickmarks: 'endcircle',
labels: ['一月','二月','三月','四月','五月','六月','七月']
}
}).draw()
};
</script>
</body>
</html>
（2）3D柱状图
<!DOCTYPE html>
<html>
<head>
<title>hangge.com</title>
<meta charset="UTF-8">
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<script src="../libraries/RGraph.bar.js" ></script>
</head>
<body>
<canvas id="cvs" width="500" height="250">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var bar = new RGraph.Bar({
id: 'cvs',
data: [ [4,8,3],[5,2,1], [8,4,2],[3,6,1],[5,1,0],[2,5,1],[1,2,2] ],
options: {
variant: '3d',
variantThreedAngle: 0.0,
strokestyle: 'rgba(0,0,0,0)',
colors: ['Gradient(#fbb:red)', 'Gradient(#bfb:green)','Gradient(#bbf:blue)'],
gutterTop: 30,
gutterLeft: 45,
gutterBottom: 80,
labels: ['周一','周二','周三','周四','周五','周六','周日'],
shadowColor:'#ccc',
shadowOffsetx: 3,
backgroundGridColor: '#eee',
scaleZerostart: true,
axisColor: '#ddd',
unitsPost: 'km',
title: '每日运动统计',
key: ['hangge','Kevin','Lucy'],
keyShadow: true,
keyShadowColor: '#ccc',
keyShadowOffsety: 0,
keyShadowOffsetx: 3,
keyShadowBlur: 15
}
}).draw();
};
</script>
</body>
</html>
2，ZingChart
ZingChart也是一个优秀的基于 HTML5 Canvas 开发的图表库。支持鼠标交互及数据钻取。
主页地址：www.zingchart.com
（1）简单的折线图
（2）简单的柱状图
（1）简单的折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hangge.com</title>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData = {
"type": "line",
"series": [
{"values":[20,40,25,50,15,45,33,34]},
{"values":[5,30,21,18,59,50,28,33]},
{"values":[30,5,18,21,33,41,29,15]}
]
};
window.onload = function () {
zingchart.render({
id: "chartDiv",
height: 300,
width: 500,
data: chartData
});
};
</script>
</head>
<body>
<div id="chartDiv"></div>
</body>
</html>
（2）简单的柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hangge.com</title>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData = {
"type": "bar",
"series": [
{"values": [35, 42, 67, 89, 25, 34, 67],"text":"hangge"},
{"values": [28, 57, 43, 56, 78, 99, 67],"text":"tom"}
],
"scale-x":{
"values":["周一","周二","周三","周四","周五","周六","周日"],
},
"title": {
"text":"运动统计"
},
"legend":{
}
};
window.onload = function () {
zingchart.render({
id: "chartDiv",
height: 300,
width: 500,
data: chartData
});
};
</script>
</head>
<body>
<div id="chartDiv"></div>
</body>
</html>
全部评论（0）