我想创建水平条形图Component，添加type : "horizontalBar"，但它仍然是垂直条形图。
我正在使用chartjs库。这是我的图表组件
import { Bar } from "react-chartjs-2";
class Chart extends Component {
constructor(props) {
super(props);
this.state = {
type: "horizontalBar",
chartData: {
labels: ["Casa", "Marrakesh", "Agadir", "tanger", "rabat"],
datasets: [
{
label: "Population",
data: [602000, 601000, 600200, 602500, 600300],
backgroundColor: ["red", "green", "blue", "black", "purple"],
},
],
},
};
}
render() {
return (
<div>
<Bar
data={this.state.chartData}
width={100}
height={50}
options={{}}
type={"horizontalBar"}
/>
</div>
);
}
}
export default Chart;
这是App组件：
import "./App.css";
import Chart from "./components/Charts";
function App() {
return (
<div className="App">
<Chart />
</div>
);
}
export default App;
非常感谢你
我相信您需要改用HorizontalBar导入。
import React from 'react';
import {HorizontalBar} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
export default React.createClass({
displayName: 'BarExample',
render() {
return (
<div>
<h2>Horizontal Bar Example</h2>
<HorizontalBar data={data} />
</div>
);
}
});
参考：https : //github.com/jerairrest/react-chartjs-2/blob/master/example/src/components/horizontalBar.js
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句