繁体   English   中英

NVD3图形上X轴的自定义标签

[英]Custom label for x axis on nvd3 graphs

我对使用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轴的“自定义值”完全乱序。 我希望在数据数组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",}]

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

有没有更好的方法来保持值同步? 任何帮助都是非常明显的。

您有key: Step 1 ,代表系列的标签(通常在工具提示中使用)。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM