Chartjs v4饼图，径向位移(偏移)

gblwokeq 于 2023-03-18 发布在 Chart.js

关注(0)|答案(1)|浏览(189)

基本上，我试图实现与此问题完全相同的目标，但在V4中：Chartjs饼图，径向位移（偏移）_
这个代码答案在v2.6中工作，有人能指导我使用v4的格式吗？

Chart.defaults.cutOutPie = Chart.helpers.clone(Chart.defaults.pie);
Chart.controllers.cutOutPie = Chart.controllers.pie.extend({
    updateElement: function(arc, index, reset) {
        Chart.controllers.pie.prototype.updateElement.call(this, arc, index, reset);
        var displacement = this.getDataset().displacements[index]||0;
        var model = arc._model;
        var angle = model.startAngle + model.circumference/2;
        model.x += Math.cos(angle) * displacement;
        model.y += Math.sin(angle) * displacement;
    }
});
new Chart('chart', {
    type: 'cutOutPie',
    data: {
        labels: ['a', 'b', 'c', 'd', 'e', 'f'],
        datasets: [{
            data: [1, 7, 2, 8, 3, 9],
            backgroundColor: ['red', 'orange', 'green', 'gold', 'pink', 'blue'],
            displacements: [0, 0, 40, 0, 0, 16],
        }],
    },
});

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="300"></canvas>

我知道如何做到这一点，如果我 Package 建设的React或vue，但不知道如何做同样的事情在浏览。
文档似乎只讨论了导入和类。

chart.js

来源：https://stackoverflow.com/questions/75670567/chartjs-v4-pie-chart-radial-displacement-offset

1条答案

按热度按时间

pes8fvy91#

javascript v4使用ecmascript类，因此自定义控制器应该是现有控制器的子类，覆盖相关方法，如"New Charts" section of the docs中概述的那样。
因此，与旧代码类似的代码是：

const PieController = Chart.controllers.pie;
class CutOutPie extends PieController{
    static id = 'cutOutPie';
    updateElement(arc, index, properties, mode) {
        const displacement = this.getDataset().displacements?.[index] || 0;
        if(displacement && properties.circumference){
            const angle = properties.startAngle + properties.circumference/2;
            properties.x += displacement * Math.cos(angle);
            properties.y += displacement * Math.sin(angle);
        }
        if(properties.outerRadius){
            properties.outerRadius -= Math.max(...this.chart.data.datasets[0].displacements);
        }
        super.updateElement(arc, index, properties, mode);
    }
}
Chart.register(CutOutPie);
new Chart('chart', {
    type: 'cutOutPie',
    data: {
        labels: ['a', 'b', 'c', 'd', 'e', 'f'],
        datasets: [{
            data: [1, 7, 2, 8, 3, 9],
            backgroundColor: ['red', 'orange', 'green', 'gold', 'pink', 'blue'],
            displacements: [0, 0, 40, 0, 0, 26],
        }]
    },
    options:{
        responsive: true,
        animation:{
            duration: 500,
            animateRotate: true,
            animateScale: true
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div style="height:500px; width: 500px">
<canvas id="chart" style="border: 1px solid #999"></canvas>
</div>

切片的半径必须按比例缩小，以避免移位的切片延伸到画布之外或与图例或其他元素重叠。
下面是一个稍微复杂一些的版本，它预先计算位移并考虑标准动画：
一个二个一个一个

展开查看全部

赞(0）回复(0）举报 2023-03-18

我来回答

Chartjs v4饼图，径向位移(偏移)

1条答案

相关问题

热门标签

最新问答