Javascript曲线表作图库 dygraphs

最新推荐文章于 2024-09-26 01:42:12 发布

kongjing0815

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量1.2k

点赞数

文章标签： javascript csv path file

dygraphs 是一个开源的Javascript库，它可以产生一个可交互式的，可缩放的的曲线表。其可以用来显示大密度的数据集（比如股票，气温，等等），并且可以让用户来浏览和解释这个曲线图。在它的主页（http://www.danvk.org/dygraphs/），你可以看到一些示例和用法。

要使用这个库，很简单，只需要包括dygraph-combined.js文件，其文件尺寸很经济，也就45K。

示例一，你可以在代码中指定数据

 
      < 
      div 
      id 
      = 
      "graphdiv" 
      ></ 
      div 
      >  
     
      < 
      script 
      type 
      = 
      "text/javascript" 
      >  
     
      g = new Dygraph(  
     
      // containing div  
     
      document.getElementById("graphdiv"),  
     
      // CSV or path to a CSV file.  
     
      "Date,Temperature\n" +  
     
      "2008-05-07,75\n" +  
     
      "2008-05-08,70\n" +  
     
      "2008-05-09,80\n"  
     
      );  
     
      </ 
      script 
      >

示例二、你可以引入外部的CSV文件。(temperatures.csv)

 
      < 
      div 
      id 
      = 
      "graphdiv2" 
     
      style 
      = 
      "width:500px; height:300px;" 
      ></ 
      div 
      >  
     
      < 
      script 
      type 
      = 
      "text/javascript" 
      >  
     
      g2 = new Dygraph(  
     
      document.getElementById("graphdiv2"),  
     
      "temperatures.csv", // path to CSV file  
     
      {}          // options  
     
      );  
     
      </ 
      script 
      >