nvd3图上x轴的自定义标签

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

下面是我的代码，我使用

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",}]

所以，我可以绘制各轴的数据提到的期望值，但它不工作。 :(

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

来源

2013-09-01 Raghuveer

您是否有小提琴或可以在其中查看代码的地方？ –

http://jsfiddle.net/VBtEx/这里是代码。我无法生成图表，因为nvd3不在任何地方。我不得不下载src代码并添加到我的页面中。感谢您的答复。 – Raghuveer

我相信你不能用NVD3做到这一点 - 它并不意味着支持这一点。您将不得不修改源代码或从头开始。 –

如果你有key: Step 1，它表示系列标签（通常在工具提示使用）。

对于X轴的标签，他们其实都是在正确显示，作为X轴标签是x的数据。如果你把你的例子，改变所有的x : 0到x : "Beer"，你就会明白我的意思。

这里的一个jsFiddle显示对x : 0 da的更改ta：http://jsfiddle.net/essboyer/ZKqkJ/

来源

2014-01-22 02:08:27

nvd3图上x轴的自定义标签

回答

相关问题