访问 react-chartjs 饼图的一部分
Accessing a slice of a react-chartjs Pie chart
我正在尝试使用 react-chartjs-2
.
创建静态(不可点击)饼图
但是我希望其中一个切片 "pop out",或者看起来比其他切片大:
因此,我正在尝试访问饼图中的一个切片并修改其 outerRadius
属性。
我在 and in 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;
我正在尝试使用 react-chartjs-2
.
创建静态(不可点击)饼图
但是我希望其中一个切片 "pop out",或者看起来比其他切片大:
因此,我正在尝试访问饼图中的一个切片并修改其 outerRadius
属性。
我在
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;