使用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

从-2\f25 react-chartjs-2 \f6库导入HorizontalBar

我在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

您还可以向HorizontalBar组件传递除data之外的其他属性，以控制图表的布局。

例如：

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