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

Question

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

Ole*_*nka 4 javascript charts bar-chart reactjs

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

到目前为止我尝试过的事情（尽管垂直条工作良好）：

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

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

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

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

或者其他出路。

谢谢

Answer 1

nar*_*cky 6

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

ZingChart 支持带有offsetValues 的水平条形图。我为您整理了一个反应示例。以下标准 vanillaJS 版本也在下面。

在 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%' 
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	2732 次
最近记录：	9 年，2 月前