Question

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

到目前为止我尝试过的事情（竖条虽然运作良好）：

1）http://fraserxu.me/react-chartist/，图表本身有水平条，但我没有办法让它与反应模块一起工作

2）https://github.com/reactjs/react-chartjs不支持横条，虽然它有一些PR，但也不确定如何使它工作

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

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

或任何其他出路。

由于

Answer 1

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

ZingChart通过CSS fails to load after refreshing a page. After the second refresh it works again and so on支持horizontal bar charts。我已经为你准备了一个反应示例。以下标准vanillaJS版本也在下面。

offsetValues

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>

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

1 个答案: