Javascript 访问react chartjs饼图的切片

我正在尝试使用

react-chartjs-2

创建一个静态（不可点击）饼图 但是，我希望其中一个切片“弹出”，或者看起来比其他切片更大：

因此，我尝试访问饼图中的一个切片，并修改其

outerRadius

属性。

---

在和中，我遇到了多个类似的问题，这帮助我得出以下结论：

从'react-chartjs-2'导入{Pie}；
{
//修改单击的切片的大小
元素[0][''U型]。外层=100；
}}
/>

---

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

在查看了

Pie

组件的引擎盖后，我最终找到了答案。
您可以在

componentDidMount（）中找到它。

：

import React，{Component}来自'React'；
从'react-chartjs-2'导入{Pie}；
类扩展组件{
componentDidMount（）{
常数变化={
索引：0，
新外差：100
}
const meta=this.pie.props.data.dataset[0]。\u meta；
元[Object.keys（元）[0]]
.数据[更改.索引]
美国模式
.outerRadius=change.newOuterRadius；
}
render（）{
常数数据={
键入“pie”，
数据集：[{数据：[10,20,30]}]，
标签：['a'，'b'，'c']，
};
常量选项={}；
返回this.pie=self}
数据={data}
选项={options}
/>
}
}
导出默认图形；

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;