请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 查看内容

HTML5 RGraph插件绘制统计图 第九章 绘制多条折线图

2013-11-10 21:45| 发布者: admin| 查看: 1788| 评论: 0|原作者: admin|来自: HTML5星空社区

摘要: HTML5 RGraph在一个折线图中绘制多根折线 接下来看一个在一个折线图中绘制多根折线的示例程序,仍然是表现2010年常州第一百货公司长虹彩电与康佳彩电的销售情,而在本示例程序中采用折线图的 形式来进行表现。 ...
HTML5 RGraph在一个折线图中绘制多根折线


接下来看一个在一个折线图中绘制多根折线的示例程序,仍然是表现2010年常州第一百货公司长虹彩电与康佳彩电的销售情,而在本示例程序中采用折线图的
形式来进行表现。如下图:



全部代码如下:

  1. <!DOCTYPE html>   
  2. <head>   
  3. <meta charset="UTF-8">  
  4. <title>使用RGraph插件制作折线图</title>  
  5. <script src="RGraph.common.core.js"></script>
  6. <script src="RGraph.line.js"></script>
  7. <script src="RGraph.common.tooltips.js"></script>
  8. <script>
  9. function window_onload()
  10. {
  11.     //绘制折线图,指定数据
  12.      myGraph = new RGraph.Line('myCanvas',[1200,1300,1400,1500,3000,1900,2000,2100,2500,2700,1400,2600],[1600,1200,1200,1600,1800,1200,1200,1600,1900,
  13.      1100,1000,1600]);
  14.     //指定折线图标题
  15.     myGraph.Set('chart.title','2010年常州第一百货公司彩电销售图');
  16.     //指定X轴标题
  17.     myGraph.Set('chart.title.xaxis','销售月份');
  18.     //指定Y轴标题
  19.     myGraph.Set('chart.title.yaxis','销售台数');
  20.     //指定折线图例被绘制在图例区域中
  21.     myGraph.Set('chart.key.position', 'graph');
  22.    //指定图例文字   
  23.     myGraph.Set('chart.key', ['长虹', '康佳']);   
  24.     //指定折线颜色
  25.     myGraph.Set('chart.colors', ['blue', 'green']);
  26.     //指定X轴的坐标轴文字
  27.     myGraph.Set('chart.labels', ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月',
  28.     '11月','12月']);
  29.     //指定Y轴的坐标轴文字  
  30.     myGraph.Set('chart.ylabels.specific',['3000','2500','2000','1500','1000','500']);
  31.     //指定线宽
  32.     myGraph.Set('chart.linewidth', 5);
  33.    //指定网格颜色
  34.     myGraph.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
  35.     //指定标签文字的绘制空间
  36.     myGraph.Set('chart.gutter', 60);
  37.     //绘制折线图   
  38.     myGraph.Draw();
  39. }   
  40. </script>
  41. </head>  
  42. <body onload="window_onload()">  
  43. <h1>使用RGraph插件制作折线图</h1>  
  44. <canvas id="myCanvas" width="700" height="400">
  45.      [您的浏览器不支持canvas元素]
  46. </canvas>
  47. </body>  
  48. </html>
复制代码






鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 07:46 , Processed in 0.098687 second(s), 32 queries .

返回顶部