【www.bbyears.com--css3教程】
下面介绍两个基于HTML5的canvas标签，采用Javascript绘制的图表库：RGraph 与 ZingChart。
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）简单的线图
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<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>
（2）3D柱状图
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<script src="../libraries/RGraph.bar.js" ></script>
<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>
2，ZingChart
ZingChart也是一个优秀的基于 HTML5 Canvas 开发的图表库。支持鼠标交互及数据钻取。
主页地址：www.zingchart.com
（1）简单的折线图
<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>
（2）简单的柱状图
<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>
原文出自：http://www.hangge.com/blog/cache/detail_1056.html