我正在使用nvd3.js制作OHLC图表。我有API的数据集,但问题是数据未正确显示在图表上。处理轴上的数字时我做错了。我已经为它创建了一个小提琴。
码
$(document).ready(function(){
var dataSet = '{"status":"success","data":[{"key":"Open","values":[[1512432000,55.65],[1512518400,54.45],[1512604800,53.05],[1512691200,56.4],[1512950400,54.65],[1513036800,55],[1513123200,53.9],[1513209600,56],[1513296000,55.9],[1513555200,56.25]]},{"key":"High","values":[[1512432000,55.65],[1512518400,55],[1512604800,57.95],[1512691200,57],[1512950400,55.5],[1513036800,55.4],[1513123200,58.9],[1513209600,56.5],[1513296000,58.5],[1513555200,57.75]]},{"key":"Low","values":[[1512432000,53.65],[1512518400,53.1],[1512604800,53.05],[1512691200,54.1],[1512950400,54.65],[1513036800,53.7],[1513123200,53],[1513209600,54],[1513296000,55.1],[1513555200,52.5]]},{"key":"Close","values":[[1512432000,54.55],[1512518400,53.6],[1512604800,55.9],[1512691200,54.65],[1512950400,54.9],[1513036800,54.1],[1513123200,55.65],[1513209600,54.45],[1513296000,56.5],[1513555200,55.65]]}]}';
var n = nv.addGraph(function () {
var chart = nv.models.cumulativeLineChart()
.x(function (d) {
return d[0]
})
.y(function (d) {
return d[1]
})
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
;
chart.xAxis
.tickFormat(function (d) {
return d3.time.format('%x')(new Date(d))
})
chart.yAxis
.tickFormat(d3.format(''));
d3.select('#chart1 svg')
.datum(JSON.parse(dataSet)['data'])
.call(chart);
return chart;
});
});
您有两个问题:
您需要折线图,而不是累积折线图。因此,只需执行以下操作:
var chart = nv.models.lineChart()
您的时间戳错误。要获得正确的时间戳,请乘以1000:
new Date(d*1000)
这是带有这些更改的JSFiddle:https ://jsfiddle.net/m5gef1bw/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句