我试图显示一个堆积的nvd3js图(http://nvd3.org/examples/stackedArea.html)并不断出现此错误:
state.disabled = data.map(function(d){return !! d.disabled});
堆叠... hart.js(第87行,第6列))
我的json示例:
var data = [
{
"key":"Key1","values":
[[1009756800000,858666000],
[1041292800000,910926000],
[1072828800000,1073489000],
[1104451200000,1333281000],
[1135987200000,2168985000],[
1167523200000,3185387000],
[1199059200000,3303486000],
[1230681600000,4372067000],
[1262217600000,8688161000],
[1293753600000,12189267000],
[1325289600000,16442852000],
[1356912000000,18622678000],
[1009756800000,2551000],
[1041292800000,2484000],
[1072828800000,2416000],
]
}
,
{
"key":"Key2","values":
[[1104451200000,9348000],
[1135987200000,12642000],
[1167523200000,12127000],
[1199059200000,11661000],
[1230681600000,33554000],
[1262217600000,32146000],
[1293753600000,30462000],
[1325289600000,177327000],
[1356912000000,177882000],
[1009756800000,0],
[1041292800000,0],
[1072828800000,0],
[1104451200000,0],
[1135987200000,0],
[1167523200000,0],
]
}
,
{
"key":"Key3","values":
[[1009756800000,185679000],
[1041292800000,236607000],
[1072828800000,150931000],
[1104451200000,323469000],
[1135987200000,281266000],
[1167523200000,309607000],
[1199059200000,557171000],
[1230681600000,787080000],
[1262217600000,1084286000],
[1293753600000,1129885000],
[1325289600000,1420153000],
[1356912000000,3315623000],
[1009756800000,193891000],
[1041292800000,253113000],
[1072828800000,296447000],
]
}
];
和nvd3js代码:
//NVd3js
function defaultChartConfigBS(container, data, useGuideline) {
if (useGuideline === undefined) useGuideline = true;
nv.addGraph(function() {
var chart;
chart = nv.models.stackedAreaChart()
.useInteractiveGuideline(useGuideline)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.useInteractiveGuideline(true) //Tooltips which show all data points. Very nice!
.rightAlignYAxis(false) //Let's move the y-axis to the right side.
.transitionDuration(500)
.showControls(true) //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
.clipEdge(true)
;
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#' + container + ' svg')
.datum(data)
// .datum( [data()[0].values] ) tried the hack from stack - didnt help
.transition().duration(20).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
最佳答案
在nvd3js代码中:
代替
您可以使用 :
chart = nv.models.stackedAreaChart()
.useInteractiveGuideline(useGuideline)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.useInteractiveGuideline(true) //Tooltips which show all data points. Very nice!
.rightAlignYAxis(false) //Let's move the y-axis to the right side.
.transitionDuration(500)
.showControls(true) //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
.clipEdge(true)
;
并且也被
chart = nv.models.stackedAreaWithFocusChart();
chart.width(600).height(500)
.x(function (d) {
return d[0]
})
.y(function (d) { return d[1] })
.color(keyColor);
您可以使用 :
d3.select('#' + container + ' svg')
.datum(data)
// .datum( [data()[0].values] ) tried the hack from stack - didnt help
.transition().duration(20).call(chart)