如何使用Chart.js创建水平条形组件

问题描述

我要创建水平条形图组件，我添加了type : "horizontalBar"，但它仍然是垂直条形图。

i; m使用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,1)',borderWidth: 1,hoverBackgroundColor: 'rgba(255,0.4)',hoverBorderColor: 'rgba(255,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