![](/img/trans.png)
[英]Creating mixed Bar Chart with ReactJS using recharts or react-chartjs-2
[英]Make a horizontal bar using react-chartjs-2
我正在努力寻找信息来使用 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>
)
}
}
我刚刚发现有一个单杠的例子。
从 react-chartjs-2 库中导入 HorizontalBar
我在 github 上找到了一个例子,叫做HorizontalBar.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>
);
}
}
除了data
之外,您还可以将其他道具传递给HorizontalBar
组件以控制图表的布局。
例如:
return (
<div>
<HorizontalBar
data={data}
width={80}
height={100}
options={{
maintainAspectRatio: true
}}
/>
</div>
);
最近我正在寻找相同的解决方案并遇到此链接 -> Chart.js - Horizontal 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
}
]
}
这将水平对齐条形图。 检查这里的输出。
我认为您可以使用 d3plus-react 中的BarChart
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.