图表插件-Dygraphs

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(当改变浏览器窗口大小，图表才正常显示)。

           解决方案：先请求数据，再将格式化的数据绑定到图表，延时渲染。