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

我剛剛發現有一個單杠的例子。

Answer 2

從 react-chartjs-2 庫中導入 Horizo​​ntalBar

我在 github 上找到了一個例子，叫做Horizo​​ntalBar.js

這是它正在實施的演示。

我到處尋找這個解決方案，所以我希望這個模板對使用 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 - Horizo​​ntal Bar

在 Bar 組件定義中，在 options 部分中添加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
      }
    ]
}

這將水平對齊條形圖。 檢查這里的輸出。

Answer 5

我認為您可以使用 d3plus-react 中的BarChart