我需要在我的 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不再支持
我需要这样的东西，这样不是所有的条都从轴开始
那么有人知道这些东西的任何现有组件吗？
我也在寻找机会在加载时添加一些动画。
或者任何其他出路。
谢谢
最佳答案
完全公开我是 ZingChart 团队的成员。
ZingChart 支持 horizontal bar charts与 offsetValues .我已经为你整理了一个 react 示例。以下标准 vanillaJS 版本也在下面。
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>关于javascript - 水平条形图(最好是动画)react.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40054783/