23

プログラムを使用して nvd3 マルチ棒グラフの幅と高さを設定しようとしています

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

次の例を参照してください。

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

ご覧のとおり、これはチャートを本当に台無しにします。私はこれがCSSでできることを知っています:

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

しかし、これはチャートの width() と height() 関数を使用しても可能だと思いました。ここで何か間違ったことをしていますか、それとも 2 つの機能を誤用していますか?

4

2 に答える 2

35

はい、可能です。チャートの幅と高さを指定したように、d3.select幅と高さの属性を使用して設定する必要があります。

コードへの変更は以下にあり、ここにコードのバージョンがあります

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;
    });
}
于 2013-05-10T07:40:59.257 に答える
0

AngularJsバージョン ( angular-nvd3 ) の場合height、チャート オプションと属性としていずれかを追加する必要がありました。

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

コメントで説明されているように、最初は内部 svg の高さを制御するようで、2 番目はグローバル チャートの高さを制御します。

于 2017-09-12T13:34:56.507 に答える