我正在尝试使用编程方式设置 nvd3 多条形图的宽度和高度
chart.width(600);
chart.height(400);
请参阅此处的示例:
http://jsfiddle.net/hPgyq/20/
正如你所看到的,这真的把图表弄乱了。我知道我可以用 CSS 做到这一点:
#chart svg {
width: 600px;
height: 400px;
}
但我认为这也可以使用图表上的 width() 和 height() 函数。我在这里做错了什么还是我误用了这两个功能?
最佳答案
是的,这是可能的,就像您指定了图表的宽度和高度一样,您必须使用 d3.select
并设置其宽度和高度属性。
对代码的更改如下,并且有一个版本的代码 here
function visualizeData(data) {
nv.addGraph(function() {
var width = 600, height = 400;
chart = nv.models.multiBarChart().x(function(d) {
return d.x;
}).y(function(d) {
return d.y;
}).color(['#aec7e8', '#7b94b5', '#486192']).stacked(true)
//.margin({top:150,right:150,bottom:150,left:150})
.width(width).height(height);
chart.multibar.hideable(false);
chart.xAxis.showMaxMin(true).tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
d3.select('#chart svg').datum(data).transition().duration(500).call(chart).style({ 'width': width, 'height': height });
nv.utils.windowResize(chart.update);
return chart;
});
}
关于nvd3.js - 如何设置nvd3图表的高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16474988/