React.js : nvd3.js의 Stacked MultiBarChart가 레이어를 올바르게 정렬하지 않습니다.

Question

MultiBarChart와 그 stacked 옵션을 사용하고 싶지만 지금까지 성공하지 못했습니다.

모듈 내가 사용 :

버전 0.5.3의

버전의

• nvd31.8.2
• 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 }] 
}