Javascript 曲线表作图库

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

dygraphs 是一个开源的Javascript库，它可以产生一个可交互式的，可缩放的的曲线表。其可以用来显示大密度的数据集（比如股票，气温，等等），并且可以让用户来浏览和解释这个曲线图

来源：陈皓的博客【原创】 2009年12月14日

关键字： JavaScript

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

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

 
1
<script type="text/javascript"

2
  src="dygraph-combined.js"></script>

下面两个示例，你可以把数据写在javascript中，也可以设置一个csv文件。

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

 
01
<div id="graphdiv"></div> 

02
<script type="text/javascript"> 

03
  g = new Dygraph( 

04
  
05
    // containing div 

06
    document.getElementById("graphdiv"), 

07
  
08
    // CSV or path to a CSV file. 

09
    "Date,Temperature\n" + 

10
    "2008-05-07,75\n" + 

11
    "2008-05-08,70\n" + 

12
    "2008-05-09,80\n" 

13
  
14
  ); 

15
</script>

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

 
1
<div id="graphdiv2"

2
  style="width:500px; height:300px;"></div> 

3
<script type="text/javascript"> 

4
  g2 = new Dygraph( 

5
    document.getElementById("graphdiv2"), 

6
    "temperatures.csv", // path to CSV file 

7
    {}          // options 

8
  ); 

9
</script>

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

业界热点:

数字化转型东数西算自动驾驶智能制造云计算元宇宙虚拟人物联网算力网络数字孪生人工智能区块链开源大数据