如何设置nvd3图表的高度和宽度 [英] how to set height and width of nvd3 chart

问题描述

我正在尝试使用

chart.width(600);
chart.height(400);

请参阅此处的示例:

http://jsfiddle.net/hPgyq/20/

正如您所看到的，这确实弄乱了图表.我知道我可以通过 CSS 做到这一点:

As you can see this really messes up the chart. I know I can do this is CSS with:

#chart svg {
  width: 600px;
  height: 400px;
}

但我认为这也可以使用图表上的 width() 和 height() 函数.我在这里做错了什么还是我错误地使用了这两个功能?

but I thought this was also possible using the width() and height() functions on the chart. Am I doing something wrong here or am I mis-using the two functions?

推荐答案

是的，这是可能的，就像您指定了宽度 &图表的高度，您必须使用 d3.select 并设置其宽度 &高度属性.

Yes it is possible, like you have specified the width & height of the chart, you have to use the d3.select and set its width & height attribute.

对代码的更改如下，并且有一个代码版本这里

Changes to the code are below and there is a version of the code 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图表的高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！