jak ustawić wysokość i szerokość nvd3 wykresie

Próbuję ustawić szerokość i wysokość nvd3 wielu wykresie słupkowym programowo przy użyciujak ustawić wysokość i szerokość nvd3 wykresie

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

Zobacz przykład tutaj:

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

Jak widać, tak naprawdę upraszcza wykres. Wiem, że można zrobić to jest CSS z:

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

ale myślałem, że to było również możliwe przy użyciu szerokość() i wysokość() funkcji na wykresie. Czy robię tu coś złego, czy też niewłaściwie wykorzystuję te dwie funkcje?

Źródło

2013-05-10 lostdorje

Tak, możliwe jest, że podałeś szerokość wykresu na wysokości &, musisz użyć wartości d3.select i ustawić jej szerokość o wysokości &.

Zmiany w kodzie są niższe i to jest wersja kodu 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; 
    }); 
}

Źródło

2013-05-10 07:40:59 shabeer90

Dzięki, widzę, że twoje modyfikacje działają. Ale czy możesz wyjaśnić, dlaczego szerokość/wysokość musi być określona w 2 oddzielnych miejscach? Wydaje się zbędne i kłopotliwe. Uwielbiam pracę NV3, ale wydaje mi się to niepożądanym aspektem API. Jestem pewien, że istnieje dobry powód, dla którego nie rozumiem. Czy mógłbyś mnie tu nauczyć? W dc.js na przykład ustawiasz szerokość/wysokość tylko w jednym miejscu, a dc.js zajmie się resztą. – lostdorje

Wierzę, że wywołania funkcji 'width' i' height' określają właściwości szerokości i wysokości wykresu, podczas gdy wywołania funkcji 'attr' z właściwościami width i height określają szerokość i wysokość svg, którym jest wykres rysowane na. – Michael

nvd3 jest złożony – SuperUberDuper

Dla wersji AngularJs (angular-nvd3), musiałem dodać albo na wykresie opcje height i jako atrybut:

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

Jak to powiedział w komentarzach, najpierw wydaje się kontrolować wysokość wewnętrznej SVG, a drugi robi globalną wysokość wykresu.

Źródło

2017-09-12 13:34:56

jak ustawić wysokość i szerokość nvd3 wykresie

Odpowiedz

Powiązane problemy