Javascript 如何将JSON数据添加到nvd3图表
我是Javascript新手,在代码中找不到错误。 我在这里使用的是NVD3图表。它是一个基于时间序列的图表,显示特定股票的日期和收盘价。数据范围从2005年到现在 这是密码Javascript 如何将JSON数据添加到nvd3图表,javascript,html,json,d3.js,nvd3.js,Javascript,Html,Json,D3.js,Nvd3.js,我是Javascript新手,在代码中找不到错误。 我在这里使用的是NVD3图表。它是一个基于时间序列的图表,显示特定股票的日期和收盘价。数据范围从2005年到现在 这是密码 var data= JSON.parse("Data.JSON") nv.addGraph(function() { var chart = nv.models.lineChart() .margin({top: 70, right: 70, bottom: 70, left: 70})
var data= JSON.parse("Data.JSON")
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({top: 70, right: 70, bottom: 70, left: 70})
.useInteractiveGuideline(true)
.transitionDuration(100)
.showYAxis(true)
.showXAxis(true)
;
//Chart x-axis settings
chart.xAxis
.axisLabel('date')
.tickFormat(function(d) {return new Date((data.Date - (25567 + 1))*86400*1000);
chart.yAxis //Chart y-axis settings
.axisLabel('close')
.tickFormat(d3.scale.linear(data.Close));
d3.select('#Charts svg') //Selecting the <svg> element where i want to render the chart in.
.datum(data) //Populating the <svg> element with chart data...
.call(chart); //Finally, rendering the chart!
//Update the chart when window resizes.
})
)
//资料
{
日期:[13089130941309513096130971309813101131031310413105131081310913110]
收盘:[2419.1、2461.6、2492.7、2489.1、2500.7、2548.7、2558.7、2582.8、2603.9、2620.1、2602.5、2572.8]
}与日期相比,Close中的数组元素数量更少 以下是您可能正在寻找的一个可能的解决方案:
nv.addGraph(function () {
var chart = nv.models.lineChart();
chart.xAxis.axisLabel('date')
.tickFormat(d3.format(''));
chart.yAxis.axisLabel('close')
.tickFormat(d3.format(''));
d3.select('#dateChart')
.datum(chartData())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(function () {
d3.select('#dateChart').call(chart)
});
return chart;
});
function chartData() {
var myData = {
"Date": [13089, 13094, 13095, 13096, 13097, 13098, 13101, 13103, 13104, 13105, 13108, 13109, 13110],
"Close": [2419.1, 2461.6, 2492.7, 2489.1, 2500.7, 2548.7, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8, 2588.8]
//The number of array elements in Close were less compared to Date. Hence added 2588.8 as the last element
};
var result = [];
for (var i = 0; i < myData.Date.length; i++) {
result.push({
x: myData.Date[i],
y: myData.Close[i]
});
}
return [{
values: result,
key: 'Date Chart',
color: '#ff7f0e'
}];
}
JS Fiddle:您遇到了什么问题?代码没有运行。什么都没有形成。谢谢你的回答。您能告诉我如何将JSON文件中的数据添加到图表中吗。我还需要将这些日期更改为%d-%m-%Y格式。@Vishukapoor:您可以将json数据保存在一个文件中,然后在代码中访问它,也可以创建一个公开json数据的后端web服务端点。然后,您可以在应用程序中调用此api。下面是一个从文件访问json数据的示例:非常感谢Gourav。@gaura我不能从plnkr复制并粘贴代码并使用它吗?代码适用于plnkr上的不同数据集,但在我的系统上使用时不适用。您需要在本地Web服务器上运行应用程序,或使用在临时服务器上运行应用程序的IDE,例如Visual Studio、Webstorm、IntelliJ等。。这可能是一个有用的资源