如何设置nvd3图表的高度和宽度

时间:2013-05-10 04:01:51

标签: nvd3.js

我正在尝试使用

以编程方式设置nvd3多条形图的宽度和高度
chart.width(600);
chart.height(400);

请参阅此处的示例:

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

正如你所看到的,这真的搞砸了图表。我知道我可以做到这一点是CSS:

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

但我认为这也可以使用图表上的width()和height()函数。我在这里做错了什么,或者我错误地使用了这两个函数?

2 个答案:

答案 0 :(得分:32)

是的,有可能,就像你已经指定宽度&图表的高度,您必须使用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;
    });
}

答案 1 :(得分:0)

对于AngularJs版本(angular-nvd3),我必须在图表选项中添加@ECHO OFF SETLOCAL ENABLEDELAYEDEXPANSION SET "sourcedir=C:\Users\acaproni\Desktop" SET "destdir=C:\Users\acaproni\Desktop" SET "filename=%sourcedir%\test.txt" SET "outfile=%destdir%\outfile.txt" ( FOR /f "usebackqdelims=" %%a IN ("%filename%") DO ( SET "line=%%a" SET "line=!line:.=/!" ECHO !line! ) )>"%outfile%" GOTO :EOF 并作为属性添加:

<强> chart.html

height

<强> chart.controller.js

<nvd3 options='vm.chartOptions' data='vm.chartData' height="250" config="vm.chartConfig">
    </nvd3>

正如评论中所说,首先似乎是控制内部svg的高度,第二个是全局图表高度。