React.js：nvd3.js的堆叠MultiBarChart没有正确排序图层

Question

我想使用MultiBarChart及其stacked选项，但到目前为止还没有成功。

我使用的模块：

• nvd3版本1.8.2
• react-nvd3版本0.5.3

以下是相关代码。

var props = {
  type: "multiBarChart",
  datum: [{
    key: "num",
    values: [{ x: "A0", y: "5" },{ x: "A1", y: "5" },{ x: "A2", y: "5" },{ x: "A3", y: "5" }]
  },{
    key: "num2",
    values: [{ x: "A0", y: "1" },{ x: "A1", y: "1" },{ x: "A2", y: "1" },{ x: "A3", y: "1" }]
  },{
    key: "num3",
    values: [{ x: "A0", y: "2" },{ x: "A1", y: "2" },{ x: "A2", y: "2" },{ x: "A3", y: "2" }]
  }],
  containerStyle: {
    width: 500,
    height: 300
  }
};

...

return (<div><NVD3Chart {...props}/></div>);

它适用于Grouped选项：

但不适用Stacked选项。最后一个键num3涵盖了所有条形，它应该是num1和num2的总和：

当我将其中一个悬停时，num3栏会完全隐藏num1和num2，并显示该值本身就是num3：

有人帮帮我吗？

Answer 1

我找到了原因。 Y字段的值应为stacked模式中的数字。

不应该：

{
  key: "num",
  values: [{ x: "A0", y: "5" },{ x: "A1", y: "5" },{ x: "A2", y: "5" },{ x: "A3", y: "5" }]
}

可是：

{
  key: "num",
  values: [{ x: "A0", y: 5 },{ x: "A1", y: 5 },{ x: "A2", y: 5 },{ x: "A3", y: 5 }]
}