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

【问题标题】：How to create a horizontal Bar Componenent with Chart.js如何使用 Chart.js 创建水平条形组件
【发布时间】：2020-12-07 18:53:57
【问题描述】：

我想创建水平条形图组件，我添加了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;

这是应用组件：

import "./App.css";
import Chart from "./components/Charts";

function App() {
  return (
    <div className="App">
      <Chart />
    </div>
  );
}

export default App;

非常感谢。

【问题讨论】：

标签： javascript reactjs charts components

【解决方案1】：

我认为您需要改用 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/reactchartjs/react-chartjs-2/blob/52d6c3e307778893a7f641b0bf540cf336bd85b4/example/src/charts/HorizontalBar.js

【讨论】：