当前位置: > > > HTML5 - 好用的Canvas图表库介绍(RGraph与ZingChart)

HTML5 - 好用的Canvas图表库介绍(RGraph与ZingChart)

下面介绍两个基于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)简单的线图
<!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)简单的折线图
<!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