0

以下の nvd3 折れ線グラフの x 軸に「月曜日、火曜日、水曜日」などの文字列を作成したいと思います。以下のコードで、x 軸に数値ではなく文字列/ラベルを持たせるにはどうすればよいですか。

$scope.options2 = {
    chart: {
        type: 'lineChart',
        height: 250,
        margin : {
            top: 20,
            right: 20,
            bottom: 40,
            left: 35
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        useInteractiveGuideline: true,
        dispatch: {
            stateChange: function(e){ console.log("stateChange"); },
            changeState: function(e){ console.log("changeState"); },
            tooltipShow: function(e){ console.log("tooltipShow"); },
            tooltipHide: function(e){ console.log("tooltipHide"); }
        },
        xAxis: {
            axisLabel: 'Time'
        },
        yAxis: {
            axisLabel: 'cd(ng/ml)',
            tickFormat: function(d){
                return d3.format('.02f')(d);
            },
            axisLabelDistance: -10
        },
        callback: function(chart){
            console.log("!!! lineChart callback !!!");
        }
    },
    title: {
        enable: true,
        text: 'Afternoon'
    },
    subtitle: {
        enable: false,
        text: '',
        css: {
            'text-align': 'center',
            'margin': '10px 13px 0px 7px'
        }
    }
};

var datax = [{
    "key" : "cope",
    "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
}];    
$scope.data2 = datax;

私はこのライブラリを使用しています: https://github.com/krispo/angular-nvd3

4

1 に答える 1

1

編集：月が欲しいと思って投稿を書いたので、平日に変更しました...

あなたが探しているのはxAxis.tickFormat方法です。アプリで moment.js を使用していると仮定すると、次のように簡単に実行できます。

xAxis: {
  axisLabel: 'Time',
  tickFormat: function(d) {
    return moment().weekday(d).format('dddd');; // for 0, returns 'Sunday'
                                             // 'Sun' if format 'ddd'
  }
}

モーメントを使用していない場合は、平日の配列を作成し、x 値を配列内の同じインデックスにマップするだけです。

var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
...
tickFormat: function(d) {
    return daysOfWeek[d];
},...

これは、moment.js の例が実装されたプランカーです。お役に立てれば！

于 2016-02-24T04:03:24.333 に答える