html5图表库,HTML5 - 好用的Canvas图表库介绍（RGraph与ZingChart）

下面介绍两个基于HTML5的canvas标签，采用Javascript绘制的图表库：RGraph与 ZingChart。

1，RGraph

RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。

当前支持的图表类型包括：

bar、pie、donut、gantt、radar、funnel、bi-polar charts

line and scatter graphs

LED display

meter

odometer

progress bar

(1)简单的线图

hangge.com

[No canvas support]

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()

};

(2)3D柱状图

hangge.com

[No canvas support]

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();

};

2，ZingChart

ZingChart也是一个优秀的基于 HTML5 Canvas 开发的图表库。支持鼠标交互及数据钻取。

主页地址：www.zingchart.com

(1)简单的折线图

hangge.com

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

});

};

(2)简单的柱状图

hangge.com

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

});

};