水平棒グラフ（できればアニメーション）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チームのメンバーです。

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

答えて

関連する問題