gpt4 book ai didi

javascript - 使用基于 d3.js 的图表库

转载 作者:行者123 更新时间:2023-11-28 04:56:08 26 4
gpt4 key购买 nike

我正在尝试使用 d3-timeseries 创建时间序列图,一个基于 d3.js 的库。我在主体的 JSP 脚本标记中使用了作者提到的实现,但我什么也没得到。如有任何帮助,我们将不胜感激。

我的代码:

    //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')

最佳答案

要使用这个库,您需要执行一些步骤,这些步骤在任何地方都没有很好的记录。

  1. 下载 ZIP .
  2. 安装bower如果你还没有
  3. 在此目录中执行bower install
  4. Zip 将包含一个 src 文件夹,其中包含 d3_timeseries.jsd3_timeseries.css 将它们链接到您的 html 文件

示例index.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>

关于javascript - 使用基于 d3.js 的图表库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42537652/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com