d3.js - 在 NVD3 堆叠/分组多条图表上输出文本标签

Question

这是图表示例的链接：http: //nvd3.org/ghpages/multiBar.html

我已经能够切换出我提供的数据的绘图值。前任：

datapoints = [ 
  {
    key: "Series1",
    color : "#62CCF1",
    values: [
  { 
    "label" : "Group A" ,
    "value" : 507
  } , 
  { 
    "label" : "Group B" , 
    "value" : 436
  } ,
  { 
    "label" : "Group C" ,
    "value" : 346
  } ,
  { 
    "label" : "Group D" ,
    "value" : 343
  } 
    ]
  }
];

但由于某种原因，我没有在 x 轴上输出“Group X”，而是标记每个条形，我只得到 NaN。我知道这与提供的图表 js 有关，因为原始示例为 x 轴生成数字。我已经搜索了 js 文件，但找不到相应的位置来编辑它。我试着添加这个：

nv.addGraph(function() {
  var chart = nv.models.multiBarChart()
  .x(function(d) { return d.label }) //this part specifically
  .y(function(d) { return d.value })

但没有任何运气。

Answer 1

values[] 必须是要在图表中绘制的 X 和 Y 点。您需要将标签和值属性重命名为 x 和 y，或者您需要创建函数来提供这些值。

只需重命名"label"为X和value为Y

这是另一个与您的数据结构相似的问题。

希望能帮助到你