2

我对使用 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",}]

这样我就可以绘制数据中提到的每个轴的期望值，但它不起作用。:(

有没有更好的方法来保持值同步？任何帮助都是非常可观的。

4

1 回答 1

1

在您拥有的地方key: Step 1，它代表系列的标签（通常在工具提示中使用）。

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

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

于 2014-01-22T02:08:27.500 回答