Chartjs 饼图，径向位移（偏移量）答案

【问题标题】：Chartjs pie chart, radial displacement (offset)Chartjs 饼图，径向位移（偏移量）
【发布时间】：2017-03-10 17:17:23
【问题描述】：

Chartjs 2 是否支持饼图段的径向位移（偏移）？

【问题讨论】：

标签： javascript chart.js2

【解决方案1】：

Chart.js 本身无法像这样剪掉一块。但是你总是可以define your own chart type！

在这里，我将pie 图表子类化为cutOutPie 类型。图表类使用updateElement 函数配置“饼片”，所以我覆盖它并移动元素的位置。详情可发邮件至reading the source。

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>

【讨论】：

谢谢！我实际上是在玩 Javascript，幸好很容易找出在哪里破解。但是感谢您提供了一个完美的例子来展示如何做到干净！
它工作得很好，除了一件事：移位的饼图段落在图表区域之外，所以它们被裁剪了。要么必须扩展区域以腾出空间（相对于给定的最大位移），要么必须类似地减小饼图的半径。我假设两者都会有相同的结果，在视觉上？我尝试在您的updateElement 中减少this.chart.outerRadius 等，但没有任何变化。
您可以尝试Chart.defaults.global.layout = {padding: 100} 作为一种快速解决方法，但这会减小整个图表的大小。
确实有效，谢谢！仍然 - 是否可以“简单地”更改半径，即每个段的长度？
@joakimk 我会说这值得提出一个新问题。