javascript - 访问 react-chartjs 饼图的一部分
问题描述
我正在尝试使用react-chartjs-2
.
但是,我希望其中一个切片“弹出”,或者看起来比其他切片大:
因此,我试图访问饼图中的切片之一并修改其outerRadius
属性。
我在Stack Overflow和Github都遇到了多个类似的问题,这帮助我想出了这个:
import { Pie } from 'react-chartjs-2';
<Pie
data={data}
options={options}
getElementsAtEvent={(elems) => {
// Modify the size of the clicked slice
elems[0]['_model'].outerRadius = 100;
}}
/>
但是,我没有找到任何关于在没有用户单击它的情况下弹出切片的信息。
解决方案
在查看Pie
组件的引擎盖后,我最终找到了答案。
你可以在里面找到它componentDidMount()
:
import React, { Component } from 'react';
import { Pie } from 'react-chartjs-2';
class PieChart extends Component {
componentDidMount() {
const change = {
sliceIndex: 0,
newOuterRadius: 100
}
const meta = this.pie.props.data.datasets[0]._meta;
meta[Object.keys(meta)[0]]
.data[change.sliceIndex]
._model
.outerRadius = change.newOuterRadius;
}
render() {
const data = {
type: 'pie',
datasets: [ { data: [10, 20, 30] } ],
labels: ['a', 'b', 'c'],
};
const options = {};
return <Pie
ref={(self) => this.pie = self}
data={data}
options={options}
/>
}
}
export default PieChart;
推荐阅读
- angular - 如何禁用垫下拉选项从一到二?
- java - 如何将函数值传递给百里香叶
- angular - Gulp 在开始时和实时后编译所有内容
- excel - 如何删除 Excel 筛选器中的数字
- android - QMake/QtCreatir 将二进制文件复制到给定位置的好策略是什么
- apache-kafka - 动态配置retention.ms不适用于kafka主题
- python - 熊猫不会将数据框写入excel文件,它仍然是空的
- redhat - NagiosXI 安装失败:[Errno 256] 没有更多镜像可以尝试
- java - 读取带有“跟随”标志的容器日志,线程被永远阻塞
- mysql - 根据sql中的另一个表显示所有日期的计数?