我正在尝试修复使用nvd3(D3)库完成的简单折线图,但似乎无法修复代码。
这是小提琴:http://jsfiddle.net/sourabhtewari/o24ffe99/
数据看起来像这样
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": "2016-03-21T00:00:00",
"y": 100.00
}, {
"x": "2016-03-22T00:00:00",
"y": 99.00
}]
}];
所有代码都像
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({
left: 100
}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.axisLabel('Date')
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis //Chart y-axis settings
.axisLabel('Consistancy')
.tickFormat(d3.format('.02f'));
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": "2016-03-21T00:00:00",
"y": 100.00
}, {
"x": "2016-03-22T00:00:00",
"y": 99.00
}]
}];
/* Done setting the chart up? Time to render it!*/
d3.select('#chart svg') //Select the <svg> element you want to render the chart in.
.datum(reportData) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() {
chart.update()
});
return chart;
});
我无法正确绘制图表。我对d3没有足够的经验。如果有人可以帮我解决这个问题。我将不胜感激。
答案 0 :(得分:1)
在reportData
:
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": new Date("2016-03-21T00:00:00"),
"y": 100.00
}, {
"x": new Date("2016-03-22T00:00:00"),
"y": 99.00
}]
}];
此外,您可以根据您的数据设置tickValues
:
var tickValues = reportData[0].values.map(function(p) { return p.x});
chart.xAxis.tickValues(tickValues);
工作示例:http://jsfiddle.net/LukaszWiktor/rcL0uot9/
结果:
答案 1 :(得分:1)
你缺少parseDate函数
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse
parseDate函数接受一个字符串并将字符串转换为Date对象。
因此您的数据应如下所示。
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": parseDate("2016-03-21T00:00:00"),
"y": 100.00
}, {
"x": parseDate("2016-03-22T00:00:00"),
"y": 99.00
}]
}];