[英]Make a horizontal bar using react-chartjs-2
I'm struggling to find information to make chart with react-chartjs-2.我正在努力寻找信息来使用 react-chartjs-2 制作图表。
I made a bar chart using react-chartjs-2.我使用 react-chartjs-2 制作了一个条形图。 I couldn't find related information about making it horizontal bar.
我找不到有关使其成为水平条的相关信息。 Is it possible to make a horizontal bar with react-chartjs-2?
是否可以使用 react-chartjs-2 制作单杠?
I also have a pie chart next to a bar chart.我在条形图旁边还有一个饼图。 I use same data from a pie chart to make a bar chart.
我使用饼图中的相同数据制作条形图。
Any help is appreciated.任何帮助表示赞赏。
Here is my code.这是我的代码。
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>
)
}
}
我刚刚发现有一个单杠的例子。
Import HorizontalBar from the react-chartjs-2 library从 react-chartjs-2 库中导入 HorizontalBar
I found an example on github called HorizontalBar.js我在 github 上找到了一个例子,叫做HorizontalBar.js
Here's an demo of it being implemented.这是它正在实施的演示。
I was looking everywhere for this solution, so I hope this template can be of use for anyone else using react-chartjs-2.我到处寻找这个解决方案,所以我希望这个模板对使用 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>
);
}
}
Then you can import it just like any other component然后你可以像导入任何其他组件一样导入它
//app.js
import Barchart from './barchart';
export default class App extends React.Component {
render() {
return (
<div>
<Barchart/>
</div>
);
}
}
You can also pass additional props besides data
to the HorizontalBar
component to control layout of the chart.除了
data
之外,您还可以将其他道具传递给HorizontalBar
组件以控制图表的布局。
For example:例如:
return (
<div>
<HorizontalBar
data={data}
width={80}
height={100}
options={{
maintainAspectRatio: true
}}
/>
</div>
);
Recently I was searching for the same solution and came across this link -> Chart.js - Horizontal Bar最近我正在寻找相同的解决方案并遇到此链接 -> Chart.js - Horizontal Bar
In the Bar component definition, add indexAxis: 'y'
within the options section.在 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
}}
/>
Also add axis: 'y'
in the dataset part of the data object.还要在数据对象的数据集部分添加
axis: 'y'
。
const data = {
labels: currLabel,
datasets: [
{
axis: 'y',
backgroundColor: '#3490dc',
hoverBackgroundColor: '#1d4f79',
data: currData
}
]
}
This aligns the bar graph horizontally.这将水平对齐条形图。 Check the output here.
检查这里的输出。
我认为您可以使用 d3plus-react 中的BarChart
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.