ChartJS 访问React图的切片饼图

acruukt9 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(170)

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

然而，我没有发现任何关于让一个切片弹出没有用户点击它。

chart.js

来源：https://stackoverflow.com/questions/57290908/accessing-a-slice-of-a-react-chartjs-pie-chart

2条答案

按热度按时间

hfsqlsce1#

在深入研究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;

赞(0）回复(0）举报 2022-11-06

rjee0c152#

我还有一个版本4.3.1的解决方案。尝试将offset属性添加到数据集中。

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

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

它将呈现具有2个部分的饼图。对于第一个部分，您将具有 * 黑色 * 边框和10px偏移量

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 访问React图的切片饼图

2条答案

相关问题

热门标签

最新问答