Question

我对使用javascript的图表相当新，现在开始使用d3和nvd3进行项目。我试图绘制由nvd3模块提供的多条形图。我成功地绘制了数据但是，我无法为每个系列自定义x轴的值。我相信它采用x的整数值来绘制图形。我的问题是如何为每个图形显示一些自定义值，如X，Y，Z而不是1,2,3。

以下是我正在使用的代码

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轴的自定义值完全无序。我想要打印X，数据数组hss x = 0中的值，数据数组x = 1的Y，依此类推。但是现在它随机出现。

我尝试将数据传递为

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

因此，我可以在数据中绘制每个轴的所需值，但它不起作用。：（

有没有更好的方法来保持值同步？任何帮助都非常值得赞赏。

Answer 1

您有key: Step 1的位置，代表系列的标签（通常用于工具提示）。

对于xAxis标签，它们实际上是正确显示的，因为xAxis标签是x数据。如果您举例并将所有x : 0更改为x : "Beer"，您就会明白我的意思。

以下是显示x : 0数据更改的jsFiddle：http://jsfiddle.net/essboyer/ZKqkJ/

nvd3图表上x轴的自定义标签

1 个答案: