0

Angular-nvd3.js を使用して縦棒グラフを作成しました。私が抱えている問題は、そのグラフのデータ ラベルにあります。これらのラベルを垂直に回転させたい。これはチャートのサンプル コードであり、編集可能なリンクでもあります。

angular.module('mainApp.controllers')

    .controller('discreteBarChartCtrl', function($scope){

        $scope.options = {
            chart: {
                type: 'discreteBarChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 50,
                    left: 55
                },
                x: function(d){return d.label;},
                y: function(d){return d.value;},
                showValues: true,
                valueFormat: function(d){
                    return d3.format(',.4f')(d);
                },
                duration: 500,
                xAxis: {
                    axisLabel: 'X Axis'
                },
                yAxis: {
                    axisLabel: 'Y Axis',
                    axisLabelDistance: -10
                }
            }
        };

        $scope.data = [
            {
                key: "Cumulative Return",
                values: [
                    {
                        "label" : "A" ,
                        "value" : -29.765957771107
                    } ,
                    {
                        "label" : "B" ,
                        "value" : 0
                    } ,
                    {
                        "label" : "C" ,
                        "value" : 32.807804682612
                    } ,
                    {
                        "label" : "D" ,
                        "value" : 196.45946739256
                    } ,
                    {
                        "label" : "E" ,
                        "value" : 0.19434030906893
                    } ,
                    {
                        "label" : "F" ,
                        "value" : -98.079782601442
                    } ,
                    {
                        "label" : "G" ,
                        "value" : -13.925743130903
                    } ,
                    {
                        "label" : "H" ,
                        "value" : -5.1387322875705
                    }
                ]
            }
        ]
})

http://plnkr.co/edit/6t5bky?p=preview

ラベルを次の図のグラフと同じにしたい

ここに画像の説明を入力

4

1 に答える 1

1

属性を使ってrotateLabels度数を設定したり、

コード：

 xAxis: {
  axisLabel: 'X Axis',
  rotateLabels: 90
 }

ここに作業がありますPlunker

于 2016-08-10T15:19:22.730 に答える