作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在努力寻找信息来使用 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>
)
}
}
最佳答案
刚刚发现有一个horizontal bar的例子.
关于reactjs - 使用 react-chartjs-2 制作一个单杠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46451884/
我正在寻找一个实现水平 slider 的类,就像“锁定”屏幕上的那个一样。换句话说,用户必须从左向右滑动条才能运行 Activity 。非常感谢您抽出宝贵时间。 最佳答案 在内部,Android 使用
我是一名优秀的程序员,十分优秀!