我正在使用 NVD3's multiChart图表。当我在图表中添加额外的面积图时,图例似乎下推了图表。添加的图表越多,图表看起来就越扭曲。
请注意 2 屏幕截图中的 Y 轴比原始屏幕截图短了近 50%。
我尝试用 CSS 删除图例,但图表仍然变短了:
.legendWrap {
display: none;
}
即使用 Javascript 删除了图例,图表仍然被扭曲:
removeElementsByClass('nv-legend');
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
知道如何解决这个问题吗?
我的完整 drawChart 函数:
function drawChart(res) {
console.log('res',res);
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(res)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
最佳答案
你是对的,图例是问题的原因。您可以像这样完全删除图例,而不是在 CSS 中设置 display: none
:
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.showLegend(false) // don't show the legend
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
完整的工作代码 here .
关于javascript - 向 NVD3 multiChart 添加额外的图表,缩短图表(由于图例)修复了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33024293/