React.js：nvd3.js的堆疊MultiBarChart沒有正確排列圖層

Question

我想使用MultiBarChart及其stacked選項，但目前尚未成功。

模塊使用：

• 版本nvd31.8.2
• 版本0.5.3

react-nvd3下面是相關的代碼。

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