come impostare altezza e la larghezza di grafico nvd3

Sto cercando di impostare la larghezza e l'altezza di un grafico a barre nvd3 a più di programmazione utilizzandocome impostare altezza e la larghezza di grafico nvd3

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

Si veda l'esempio qui:

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

Come puoi vedere, questo fa veramente casino sul grafico. So che posso fare questo è CSS con:

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

ma ho pensato che questo era possibile anche utilizzando la larghezza() e l'altezza() funzioni sul grafico. Sto facendo qualcosa di sbagliato qui o sto usando male le due funzioni?

fonte

2013-05-10 lostdorje

sì, è possibile, come è stato specificato la larghezza & altezza del grafico, è necessario utilizzare il d3.select e impostare il suo attributo width & altezza.

Modifiche al codice sono al di sotto e c'è una versione del codice 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; 
    }); 
}

fonte

2013-05-10 07:40:59 shabeer90

Grazie, vedo che le tue modifiche funzionano. Ma puoi spiegare perché la larghezza/altezza deve essere specificata in 2 luoghi separati? Sembra ridondante e ingombrante. Adoro il lavoro su NV3, ma questo mi sembra un aspetto indesiderato dell'API. Sono sicuro che c'è una buona ragione per cui non capisco. Potresti per favore educarmi qui? Ad esempio, in dc.js, si imposta la larghezza/altezza in un unico posto e dc.js si prende cura del resto per te. – lostdorje

Credo che le chiamate a 'width' e' height' stiano impostando le proprietà width e height del grafico, mentre le chiamate a 'attr' con le proprietà width e height impostano la larghezza e l'altezza dello svg il grafico è disegnato su – Michael

nvd3 è complesso – SuperUberDuper

Per la versione AngularJs (angular-nvd3), ho dovuto aggiungere i height sia in grafico le opzioni e come attributo:

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

Come è detto nei commenti, sembra prima controllare l'altezza del svg interno e il secondo fa l'altezza globale grafico.

fonte

2017-09-12 13:34:56

come impostare altezza e la larghezza di grafico nvd3

risposta

Problemi correlati