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;
});
}