訪問 react-chartjs 餅圖的一部分

Question

我正在嘗試使用react-chartjs-2創建一個 static （不可點擊）餅圖。
但是，我希望其中一個切片“彈出”，或者看起來比其他切片大：

因此，我試圖訪問餅圖中的切片之一並修改其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;
    }}
/>

但是，我沒有找到任何關於在沒有用戶單擊它的情況下彈出切片的信息。

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;

Answer 2

我還有一個版本 4.3.1 的解決方案。 嘗試將offset屬性添加到datasets中。

import { Pie } from 'react-chartjs-2';

<Pie
    data={
      datasets: [
        {
          data: [1, 1],
          borderColor: ['black', 'transparent'],
          offset: [10, 0],
        },
      ],
    }
/>

它將用 2 段渲染 Pie。 對於第一段，您將有黑色邊框和10px 偏移