码迷,mamicode.com
首页 > 其他好文 > 详细

图表插件-Dygraphs

时间:2015-06-09 19:39:15      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

For:主要用于显示密集的数据集合,用户能够很好的浏览和查看数据

 
实现原理简单说明:1.利用js动态生成一个包含canvas元素标签的div元素标签,canvas标签中显示数据
                         2.利用js动态生成一个或多个div元素标签,包含x轴,y轴,图表标题等内容,并加到第一步的div(graphDiv)元素中
                         3.在页面中用一个div元素包含graphDiv
效果图:
技术分享技术分享
使用:
        new Dygraph(position,data, {
     rollPeriod : 14,
  showRoller : true,
   customBars : false,
   ylabel : ‘°C‘,
   legend : ‘always‘,
  labelsDivStyles : {
  
‘textAlign‘ : ‘right‘
  },
  showRangeSelector : true, //自带的刻度查询,可以自定义查看数据
  rangeSelectorHeight : 30,
  rangeSelectorPlotStrokeColor : ‘yellow‘,
  rangeSelectorPlotFillColor : ‘lightyellow‘
});
position:图表显示的位置(document.getElementById(‘id‘))
data:图表的数据源
     1.数据格式:Date,High,Low\n20070101,62,39\n20070102,62,44\n20070103,62,42\n20070104,57,45\n        第一组数据指定x轴和数据列含义
2.支持的数据源主要类型:1)引入csv文件的位置 2)return 数据 3)function(){} 返回字符串,数组等符合数据格式的数据类型
 
Warning:   在实际开发过程当中遇到个有趣的问题,项目使用的前端js框架是angular。使用angular的自定义指令对图表进行封装,
当图表渲染和数据请求同时进行时,会出现图表不正常显示的bug(当改变浏览器窗口大小,图表才正常显示)。
           解决方案:先请求数据,再将格式化的数据绑定到图表,延时渲染。
技术分享

图表插件-Dygraphs

标签:

原文地址:http://www.cnblogs.com/Ericccw/p/4563876.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!