我正在尝试使用 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;
关于javascript - 访问react-chartjs饼图的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57290908/