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库中导入HorizontalBar

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

的示例

这里{@ {3}}正在实施。

我一直在到处寻找这种解决方案，所以希望该模板可以对使用react-chartjs-2的其他任何人使用。

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

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

然后，您可以像导入其他任何组件一样将其导入

df

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

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

5 个答案: