是一个 百度旗下 使用各种图表展示统计分析结果的js插件
引入这个js,你就可以使用echarts官网上提供的所有图表工具
官网链接:网页链接
如图所示:
<!DOCTYPE html>02<head>
03<meta charset="UTF-8">
04<title>使用RGraph插件制作柱状图</title>
05<script src="/jscss/demoimg/201401/RGraph.common.core.js"></script>
06<script src="/jscss/demoimg/201401/RGraph.bar.js"></script>
07<script>
08function window_onload()
09{
10//绘制柱状图,指定数据
11myGraph = new RGraph.Bar('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,
122500,2700,1400,2600])
13 //指定统计图标题
14myGraph.Set('chart.title','某个年份常州第一百货公司长虹彩电销售图')
15//指定X轴标题
16myGraph.Set('chart.title.xaxis','销售月份')
17//指定Y轴标题
18myGraph.Set('chart.title.yaxis','销售台数')
19//指定X轴的坐标轴文字
20myGraph.Set('chart.labels',['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
21'11月','12月'])
22//指定Y轴的坐标轴文字
23myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500'])
24//指定在坐标轴顶部绘制说明销售数量的文字
25myGraph.Set('chart.labels.above', true)
26//指定网格自动与坐标轴单位对齐
27myGraph.Set('chart.background.grid.autofit', true)
28myGraph.Set('chart.background.grid.autofit.align', true)
29//指定标签文字所使用的空间尺寸
30myGraph.Set('chart.gutter',65)
31//绘制柱状图
32myGraph.Draw()
33}
34</script>
35</head>
36<body onload="window_onload()">
37<h1>使用RGraph插件制作柱状图</h1>
38<canvas id="myCanvas" width="700" height="400">
39 [您的浏览器不支持canvas元素]
40</canvas>
41</body>
42</html>