nvd3.js - multibarchart - nvd3 live

Cómo configurar la altura y el ancho del gráfico nvd3

Question

Estoy tratando de establecer el ancho y alto de un gráfico de barras nvd3 mediante programación

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

Vea el ejemplo aquí:

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

Como pueden ver, esto realmente desordena la tabla. Sé que puedo hacer esto es CSS con:

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

pero pensé que esto también era posible usando las funciones width () y height () en el gráfico. ¿Estoy haciendo algo mal aquí o estoy usando mal las dos funciones?

Answer 1

Para la versión de AngularJs ( angular-nvd3 ), tuve que agregar la height en las opciones del gráfico y como atributo:

chart.html

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

chart.controller.js

vm.chartOptions = {
    chart : {
        height : 250,
        type : "pieChart",
        donut : true,
        showLegend : false,
        //The rest of the configuration
};

Como se indica en los comentarios, primero parece controlar la altura del svg interno y el segundo hace la altura del gráfico global.

Answer 2

Sí, es posible, como ha especificado el ancho y alto del gráfico, tiene que usar el d3.select y establecer su atributo de ancho y alto.

Los cambios en el código están abajo y hay una versión del código 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;
    });
}