使用基於d3.js的製圖庫

我正在嘗試使用基於d3.js的庫d3-timeseries創建時間序列圖。我正在使用作者在我的JSP腳本標記中提到的實現，但我什麼也沒有得到。任何幫助表示讚賞。使用基於d3.js的製圖庫

我的代碼：

//data : 

    // [{date:new Date('2013-01-01'),n:120,n3:200},...] 

    var chart = d3.timeseries() 
        .addSeries(data,{x:'date',y:'n',diff:'n3'}, 
        {interpolate:'monotone',color:"#333"}).width(900) 


chart('#chart')

來源

2017-03-01 Ash

要使用這個庫，你需要執行未很好地記錄任何地方只有幾步之遙。

下載ZIP。
安裝bower，如果你不已經
做bower install在這個目錄裏
郵編將包含一個src文件夾d3_timeseries.js和d3_timeseries.css環節他們都到HTML文件

樣本指數。 html文件，如果在解壓縮的文件夾中使用該文件：

<html> 
<head> 
<script src="bower_components/d3/d3.min.js"></script> 
<script src="src/d3_timeseries.js"></script> 
<link href="src/d3_timeseries.css" rel="stylesheet" type="text/css"> 

</head> 
<body> 
    <div class="chart" id="chart3"></div> 
</body> 
    <script> 

     var data = createRandomData(80,[0,1000],0.01) 


     var chart3 = d3.timeseries() 
        .addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"}) 
        .width(900) 

     chart3('#chart3') 



     function createRandomData(n,range,rand) 
     { 
     if(range==null) 
     range=[0,100] 
     if(rand==null) 
     rand=1/20 

     var num = range[0] + Math.floor(Math.random()*(range[1]-range[0])) 
     var num2 = range[0] + Math.floor(Math.random()*(range[1]-range[0])) 
     var num3 = num 
     var d= new Date('2013-01-01') 
     var data = [] 
     var rgen = d3.random.normal(0,(range[1]-range[0])*rand) 
     for (var i = 0; i<n; i++) 
     { 

     data.push({date:d,n:num,n2:num2,n3:num3, 
       ci_up:num3*1.05,ci_down:num3*0.95 
     }) 
     d = new Date(d.getTime() + 1000*60*60*24) 
     num = num+rgen() 
     num3 = num+rgen()/3 
     num = Math.min(Math.max(num,range[0]),range[1]) 
     num2 = num2+rgen() 
     num2 = Math.min(Math.max(num2,range[0]),range[1]) 



     } 
     return data; 
     } 

     </script> 
</html>

來源

2017-03-02 01:28:32

非常感謝您的支持lution。但是，我正在構建一個Web應用程序並使用JSP。我的實現的問題是我使用d3.js的第4版，並通過JavaScript調試時，我得知問題是當調用.scale（axis）函數時。因此，經過小小的研究發現該功能在3.5.12版本中可用。所以當我將d3.js文件3.5.12替換爲該版本時，它工作正常！ – Ash

@ash不客氣。是啊，如果你看看bower.json，他已經鎖定它的版本。所以這是與我的回答有所不同的一步。你分別下載了我安裝了bower的d3js庫。如果你接受了答案，這將是很好的:) –

使用基於d3.js的製圖庫

回答

相關問題