web-dev-qa-db-fra.com

comment régler la hauteur et la largeur du graphique nvd3

J'essaie de définir la largeur et la hauteur d'un graphique à barres multi nvd3 à l'aide de programmes

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

Voir l'exemple ici:

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

Comme vous pouvez le constater, cela désorganise vraiment le tableau. Je sais que je peux faire ceci est CSS avec:

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

mais je pensais que cela était également possible en utilisant les fonctions width () et height () du graphique. Est-ce que je fais quelque chose de mal ici ou est-ce que j'utilise mal les deux fonctions?

nvd3.js
21
lostdorje

Oui, c'est possible, comme vous avez spécifié la largeur et la hauteur du graphique, vous devez utiliser le d3.select et définir son attribut width & height.

Les modifications apportées au code sont indiquées ci-dessous et il existe une version du code ici

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

Pour les AngularJs version ( angular-nvd3 ), je devais ajouter height soit dans les options du graphique, soit en tant qu'attribut:

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

Comme il est dit dans les commentaires, le premier semble contrôler la hauteur du svg intérieur et le second la hauteur du graphique global.

0
Xtreme Biker