d3-timeseries、d3.jsベースのライブラリを使用して時系列グラフを作成しようとしています。私は私のJSP scriptタグの中で著者の言及した実装を使っていますが、何も得られません。どんな助けもありがとうございます。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')
はあなたが非常によく、どこにも文書化されていないいくつかの手順を実行する必要があり、このライブラリを使用します。
bower install
d3_timeseries.jsと
d3_timeseries.cssリンクでサンプルインデックスをそれらの両方を
srcフォルダが含まれていますか持っていない場合
bowerをインストールしてください。ライブラリを解凍したフォルダ内で使用される場合に動作する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>
ありがとうlution。しかし、私はWebアプリケーションを構築し、JSPを使用しています。私の実装での問題は、バージョン4のd3.jsを使用していて、javascriptでデバッグしているときに、.scale（axis）関数が呼び出されたときに問題が発生していることを知りました。したがって、この機能がバージョン3.5.12で利用可能であることがほとんど調査されていないためです。だから、私はd3.jsファイル3.5.12をこのバージョンに置き換えました。 – Ash
@ashようこそ。もしあなたがbower.jsonを見れば、彼はそれをそのバージョンに固定しました。それが私の答えとは違うステップです。 bowerと一緒にインストールした場所でd3jsライブラリを個別にダウンロードしました。あなたが答えを受け入れるといいだろう:) –