使用 react-chartjs-2 制作水平条

Question

我正在努力寻找使用 react-chartjs-2 制作图表的信息。

我使用 react-chartjs-2 制作了一个条形图。我找不到有关使其成为水平条的相关信息。是否可以使用 react-chartjs-2 制作水平条？

我在条形图旁边还有一个饼图。我使用饼图中的相同数据来制作条形图。

感谢任何帮助。

这是我的代码。

export default class Categories extends React.Component{
constructor(props){
    super(props);
    this.state = {
        slideOpen : false,
        piData : piData
      }

this.handleClick = this.handleClick.bind(this);
this.update = this.update.bind(this);
this.doParentToggle = this.doParentToggle.bind(this);
}

doParentToggle(){


this.setState({
    piData : piData
  })
  this.update();
  }

handleClick(){
    this.setState({
        slideOpen : !this.state.slideOpen
    })
}

update() {
  var piData;
  this.setState({
    piData : piData
  })
 }    

render(){
 const CategoriesPanel = this.state.slideOpen? "slideOpen" : "";
 const { length } = this.props


  var totalData = piData + piData2 + piData3 + piData4 + piData5;

   let newpiData =  function() {
   return parseFloat((piData /  totalData ) * 100 ).toFixed(2) };

   let newpiData2 =  function() {
   return parseFloat((piData2 /  totalData ) * 100).toFixed(2) };

   let newpiData3 =  function() {
   return  parseFloat((piData3 /  totalData ) * 100).toFixed(2) };

   let newpiData4 =  function() {
   return parseFloat((piData4 /  totalData ) * 100).toFixed(2) };

   let newpiData5 =  function() {
   return parseFloat((piData5 /  totalData ) * 100).toFixed(2) };

  const data = {
  datasets: [{
    data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()],
    backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
    borderColor: [ 'orange',
    'blue',
    'red',
    'purple',
    'green'
    ]
   }]};

   var pieOptions = {
      pieceLabel: {
     render: 'value',
     fontSize: 30,
     fontColor: '#fff'
   }
  };

  const bardata = {
  labels: ['1', '2', '3', '4', '5'],
  datasets: [
   {
  backgroundColor: [
    'orange',
    'blue',
    'red',
    'purple',
    'green'
    ],
  borderColor: 'black',
  borderWidth: 3,
  hoverBackgroundColor: 'rgba(255,99,132,0.4)',
  hoverBorderColor: 'rgba(255,99,132,1)',
  data: [ newpiData() , newpiData2(), newpiData3(), newpiData4(), newpiData5()]
  }
  ]
  };
  return(
<div>
<div id="chart" className={CategoriesPanel}>
<div style={{"display" : "flex"}}>
<Pie style={{"fontSize" : "20px" }} data={data} options={pieOptions}/>
<Bar
      data={bardata}
      width={100}
      height={50}
      options={{
        maintainAspectRatio: false
      }}
      options={pieOptions}
    />
</div>
 </div>
<div className="categoriesSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div>
 <div className="clear">
 <List parentToggle={this.doParentToggle} />
 <ListSecond parentToggle={this.doParentToggle} />
 <ListThird parentToggle={this.doParentToggle} />
 <ListFourth parentToggle={this.doParentToggle} />
 <ListFifth parentToggle={this.doParentToggle} />
 </div>
 </div>
    )
}
}

Answer 1

刚刚发现有horizontal bar的例子。

Answer 2

从 react-chartjs-2 库中导入 Horizo​​ntalBar

我在 github 上找到了一个名为 HorizontalBar.js 的示例

这是正在实施的demo。

我到处寻找这个解决方案，所以我希望这个模板可以用于其他使用 react-chartjs-2 的人。

//barchart.js
import React from 'react';
import {HorizontalBar} from 'react-chartjs-2';

const state = {
    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 class barchart extends React.Component {
  render() {
    return (
        <div>
            <h2>Horizontal Bar Example</h2>
            <HorizontalBar data={state} />
        </div>
    );
  }
}

然后你可以像任何其他组件一样导入它

//app.js
import Barchart from './barchart';

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Barchart/>
            </div>
        );
    }
}

Answer 3

您还可以将data 之外的其他道具传递给HorizontalBar 组件来控制图表的布局。

例如：

return (
      <div>
        <HorizontalBar
          data={data}
          width={80}
          height={100}
          options={{
            maintainAspectRatio: true
          }}
        />
      </div>
    );

Answer 4

最近我正在寻找相同的解决方案并遇到了这个链接 -> Chart.js - Horizontal Bar

在 Bar 组件定义中，在选项部分添加 indexAxis: 'y'。

 <Bar
     data={data}
     options={{
     indexAxis: 'y',
     plugins:{
          title:{display:false, text:currText, font:{size: 12, family: 'rubik'}},
          legend: {display: false, position: 'right'}},
     maintainAspectRatio: false
     }}
 />

还要在数据对象的数据集部分添加axis: 'y'。

const data = {
    labels: currLabel,
    datasets: [
      {
        axis: 'y',
        backgroundColor: '#3490dc',
        hoverBackgroundColor: '#1d4f79',
        data: currData
      }
    ]
}

这会水平对齐条形图。 Check the output here.

Answer 5

我认为你可以使用 d3plus-react 中的BarChart