访问 react-chartjs 饼图的一部分

Question

我正在尝试使用 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;
    }}
/>

但是，我没有找到任何有关在用户不单击的情况下弹出切片的信息。

Answer 1

在查看 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 饼图的一部分

Accessing a slice of a react-chartjs Pie chart

javascript

reactjs

charts

chart.js

react-chartjs