水平条形图（最好是动画）react.js答案

【问题标题】：Horizontal Bar Chart (preferably animated) react.js水平条形图（最好是动画）react.js
【发布时间】：2017-02-24 13:43:21
【问题描述】：

我需要在我的 react 应用程序中创建非常简单的水平条形图，但真的无法完成。

到目前为止我已经尝试过的事情（虽然垂直条效果很好）：

1) http://fraserxu.me/react-chartist/，chartist 本身有水平条，但我没有找到让它与 react 模块一起使用的方法

2) https://github.com/reactjs/react-chartjs 不支持水平条，虽然有一些 PR，但也不知道如何使它工作

3) 不再支持https://github.com/laem/react-horizontal-bar-chart

我需要这样的东西，这样不是所有的条都从轴开始那么有人知道这些东西的任何现有组件吗？我也在寻找机会在那里加载一些动画。

或任何其他方式。

谢谢

【问题讨论】：

标签： javascript reactjs charts bar-chart

【解决方案1】：

完全披露我是 ZingChart 团队的一员。

ZingChart 支持horizontal bar charts 和offsetValues。我为您整理了一个反应示例。以下标准 vanillaJS 版本也在下面。

react demo on codepen

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

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

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

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

【讨论】：