가로형 막 대형 차트 (선호하는 애니메이션) react.js

내 반응 어플리케이션에서 매우 단순한 가로형 막 대형 차트를 작성해야하지만 실제로 처리 할 수는 없습니다. 내가 지금까지 시도했습니다가로형 막 대형 차트 (선호하는 애니메이션) react.js

것 (수직 막대 그래도 좋은 작업) : 나는 그것이 작동 할 수있는 방법을 찾을 수 없습니다

1) http://fraserxu.me/react-chartist/, 차티스트 자체가 수평 막대를 가지고 있지만, 모듈

반응 또한

3) https://github.com/laem/react-horizontal-bar-chart 내가 필요

더 이상 지원되지 않는 작동하게하는 방법을 잘 없다 그것을 위해 어떤 PR이지만,하지만

2) https://github.com/reactjs/react-chartjs은 수평 막대를 지원하지 않습니다 이런 식으로, 모든 막대가 축에서 시작하지는 않습니다. 그래서 누군가가 그러한 것들에 대한 기존 구성 요소를 알고 있습니까? 로드 할 때 애니메이션을 추가 할 수있는 기회를 찾고 있습니다.

또는 기타 다른 방법.

덕분에

출처

2016-10-15 Olenka

전체 공개 나는 ZingChart 팀의 일원입니다.

징 차트는 horizontal bar charts을 offsetValues으로 지원합니다. 나는 당신을 위해 반응의 예를 든다. 다음과 같은 표준 vanillaJS 버전도 있습니다.

react demo on codepen

var myConfig = { 
 
    \t type: 'hbar', 
 
    \t plot: { 
 
    \t stacked: true, 
 
     animation: { 
 
     sequence: 3, 
 
     effect: 4, 
 
     method: 1, 
 
     speed: 500 
 
     } 
 
    \t }, 
 
    \t legend: { 
 
    \t borderWidth: 0 
 
    \t }, 
 
    plotarea: { 
 
     margin: 'dynamic' 
 
    }, 
 
    \t scaleX: { 
 
    \t labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu'] 
 
    \t }, 
 
    \t scaleY: { 
 
    \t minValue: 0, 
 
    \t maxValue: 16, 
 
    \t step: 4.5, 
 
    \t decimals: 1 
 
    \t }, 
 
\t series: [ 
 
\t \t { 
 
\t \t \t values: [5.0,3.0,5.5,2.0,2.5], 
 
\t \t \t offsetValues: [1.0,3.0,0,2.0,2.5], 
 
\t \t \t backgroundColor: '#FF6600', 
 
\t \t \t valueBox: { 
 
\t \t \t placement: 'bottom', 
 
\t \t \t rules: [ 
 
\t \t \t  { 
 
\t \t \t  rule: '%i == 2', 
 
\t \t \t  visible: false 
 
\t \t \t  } 
 
\t \t \t ] 
 
\t \t \t }, 
 
      text: 'Jim' 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [5.0,8.0,9.0,4.0,3.5], 
 
\t \t \t offsetValues: [1.0,3.0,0,2.0,2.5], 
 
\t \t \t backgroundColor: '#DC143C', 
 
\t \t \t valueBox: {}, 
 
      text: 'Joe' 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
</script> 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"></div> 
 
\t </body> 
 
</html>

출처

2016-10-17 17:41:03 nardecky

가로형 막 대형 차트 (선호하는 애니메이션) react.js

답변

관련 문제