2

私はJavaScriptを使用したグラフにかなり慣れていないため、プロジェクトにd3とnvd3を使用し始めました。nvd3 モジュールが提供する複数の棒グラフをプロットしようとしています。データのプロットには成功しましたが、各シリーズの x 軸の値をカスタマイズできません。グラフをプロットするために x の整数値を取っていると思います。私の質問は、グラフごとに 1、2、3 ではなく、X、Y、Z などのカスタム値を表示するにはどうすればよいかということです。

以下は私が使用している私のコードです

var data = [{
        "key" : "Step 1",
        "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
    }, {
        "key" : "Step 2",
        "values" : [{"y" : 4,"x" : 0}, {"y" : 5,"x" : 2 }, {"y" : 6,"x" : 1 }]
    }, {
        "key" : "Step 3",
        "values" : [{"y" : 5,"x" : 2}, {"y" : 4,"x" : 0 }, {"y" : 5,"x" : 1 }]
    }];

    var chart;
    var tickValues = ['X','Y','Z'];
    nv.addGraph(function() {
        chart = nv.models.multiBarChart().margin({
            bottom : 100
        }).transitionDuration(300).delay(0).groupSpacing(0.5);
        chart.multibar.hideable(true);
        chart.reduceXTicks(true).staggerLabels(true);
        chart.xAxis.showMaxMin(false)
            //.tickValues(tickMarks)
            .tickFormat(function(x){
                    return tickValues[x]
                }
            );
        chart.yAxis.tickFormat(d3.format(',.1f'));
        d3.select('#chart1 svg').datum(data).call(chart);
        nv.utils.windowResize(chart.update);
                    return chart;
    });

上記のコードを使用してグラフをプロットすると、グラフは正しく生成されますが、X 軸のカスタム値は完全に順不同です。データ配列 hss x = 0 の値、データ配列 x = 1 の Y などの X を出力したい。しかし、今はランダムに来ています。

データを次のように渡そうとしました

var data = [{ "key" : "Step 1", "values" : [{"y" : 5,"x" : "Z",},{"y" : 4,"x" : "Y",}, {"y" : 4,"x" : "X",}]

データに記載されているように、各軸の目的の値をプロットできるようにしますが、機能しません。:(

値を同期させるより良い方法はありますか? どんな助けも非常に高く評価されます。

4

1 に答える 1

1

がある場合key: Step 1、これはシリーズのラベルを表します (通常はツールチップで使用されます)。

xAxis ラベルに関しては、xAxis ラベルは x データであるため、実際には正しく表示されます。あなたの例を見て、すべてを に変更するx : 0とx : "Beer"、私が何を意味するかがわかります。

x : 0データへの変更を示す jsFiddle は次のとおりです: http://jsfiddle.net/essboyer/ZKqkJ/

于 2014-01-22T02:08:27.500 に答える