所以我使用 nvd3,我想在一张折线图中显示 2 条线。我知道代码没问题,因为我正在 nvd3 的实时代码上尝试它并且工作正常。我在很多地方读到,他们在 nvd3 live 代码上使用的代码与 api 不同。
因此该图有阴影并且有点。然而,在 nvd3 的实时代码中,没有点,也没有阴影区域。
这是我的代码:
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.width(900)
.height(600)
.margin({
left: 75,
right: 50
})
.showLegend(true)
.showYAxis(true)
.showXAxis(true)
.width(800)
.height(900);
;
chart.xAxis
.tickFormat(d3.format(',r'))
;
chart.yAxis
.tickFormat(d3.format('.02f'))
;
//console.log(json);
d3.select('#Average_Life svg')
.datum([{"values":[{"x":0,"y":2042},{"x":173,"y":1922},{"x":347,"y":1873},{"x":526,"y":1907},
{"x":700,"y":1883},{"x":931,"y":1854},{"x":1058,"y":1710},{"x":1220,"y":1473},{"x":1399,"y":1792},
{"x":1584,"y":1869},{"x":1752,"y":2259},{"x":1983,"y":2288},{"x":2105,"y":2524},{"x":2284,"y":2770},
{"x":2469,"y":2857},{"x":2637,"y":2698},{"x":2811,"y":2760},{"x":3042,"y":2596},{"x":3169,"y":2500},
{"x":3331,"y":2408},{"x":3522,"y":2355},{"x":3690,"y":2500},{"x":3863,"y":2524},{"x":4095,"y":2447}],
"key":"dd","color":"#34418f"},{"values":[{"x":0,"y":3753},{"x":173,"y":3609},{"x":347,"y":3464},
{"x":526,"y":3315},{"x":700,"y":3170},{"x":931,"y":2977},{"x":1058,"y":2871},{"x":1220,"y":2736},
{"x":1399,"y":2587},{"x":1584,"y":2433},{"x":1752,"y":2293},{"x":1983,"y":2100},{"x":2105,"y":1999},
{"x":2284,"y":1849},{"x":2469,"y":1695},{"x":2637,"y":1555},{"x":2811,"y":1411},{"x":3042,"y":1218},
{"x":3169,"y":1112},{"x":3331,"y":977},{"x":3522,"y":818},{"x":3690,"y":678},{"x":3863,"y":534},
{"x":4095,"y":341}],"key":"ss","color":"#f9b800"}])
.transition().duration(500)
.call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() {
chart.update()
});
return chart;
});
所以我想知道为什么阴影区域和点。为什么我看不到轴,
Cheers