ChartJS：将标签放置在甜甜圈段的末尾

Question

我使用带有扩展程序的 ChartJS 图表js-gauge，它基本上是一个定制的甜甜圈，用于创建仪表样式图表。我添加了Chartjs-plugin-datalabels 插件，以便我可以自定义标签。

饼图和圆环图中的标签通常用于显示该段的值，但由于它已被自定义为显示为仪表，我想将数据标签放置在每个段的末尾，以便它显示该点的值，例如所以：

虽然可以使用锚定、对齐和偏移来移动标签，但它们允许围绕一个点进行有限的移动，我无法找到一种方法来实现我所需要的。我可以锚定到“结束”以将标签置于仪表之外，然后我想也许我可以结合对齐和偏移将标签推到段的末尾，但不幸的是这些命令似乎基于整体的轴仪表而不是弧形部分。

这是我用来设置选项和数据的代码。这是在 Salesforce Aura 组件内，因此 ChartJsGaugeInstance 从控制器获取值：

let chartJsGaugeInstance = component.get("v.dataInstance");
let type = chartJsGaugeInstance.type;
let target = chartJsGaugeInstance.targetValue;
let firstDivide = target * 0.33;
let secondDivide = target * 0.66;
let data = {
    datasets : [{
        backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
        data: [firstDivide, secondDivide, target],
        value: chartJsGaugeInstance.dataValues,
        datalabels: {
            anchor: 'center',
            align: 'center',
            offset: 0
        }
    }]
};

let options = {
    responsive: true,
    title: {
        display: true,
        text: chartJsGaugeInstance.title
    },
    layout: {
        padding: {
            bottom: 30
        }
    },
    needle: {
        // Needle circle radius as the percentage of the chart area width
        radiusPercentage: 1.5,
        // Needle width as the percentage of the chart area width
        widthPercentage: 1,
        // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
        lengthPercentage: 80,
        // The color of the needle
        color: 'rgba(0, 0, 0, 1)'
    },
    valueLabel: {
        formatter: Math.round
    },
    cutoutPercentage : 80,
    plugins: {
        datalabels: {
            display: true,
            formatter:  function (value, context) {
                return context.chart.data.labels[context.dataIndex];
            },
            color: 'rgba(0, 0, 0, 1.0)',
            backgroundColor: null,
            font: {
                size: 16
            }
        }
    }
}

这是结果图表： 我可以通过更改数据集对象中的数据标签参数来移动标签（在本例中，我将它们留在中间），但由于它们都相对于图表区域而不是相对段的方向移动，所以我可以' t 让它们全部对齐到其段的末尾。下面是一个示例，它将 6k 标签移动到大约正确的位置，但 3k 和 10k 标签最终移出：

datalabels: {
    anchor: 'end',
    align: 'right',
    offset: 50
}

这是我用于数据标签定位的文档。“对齐”部分下的一行内容如下：

'end'：标签位于锚点之后，遵循相同的方向

我认为这就是我想要的，“遵循相同的方向”对我来说建议它应该遵循线段的弧线，但事实并非如此：

datalabels: {
    anchor: 'end',
    align: 'end',
    offset: 20
}

还有其他人设法实现这一目标吗？ 自 2018 年以来，github 中提出了一个类似的问题，标记为“增强”，但想知道是否有一种方法可以通过编程或编辑源文件来实现此目的，因为它看起来不会很快交付。

谢谢！

更新

我已经设法使用 Scriptable Options 找到了部分解决方案。以下代码更新为我在每个扇区的末尾提供了很好定位的标签。我已将数据标签代码从数据集移至选项中

let numSectors = data.datasets[0].data.length;
let sectorDegree = 180 / numSectors;

datalabels: {
    anchor: 'end',
    align: function(context){
        return (sectorDegree * context.dataIndex) - sectorDegree;
    },
    offset: function(context){
        return 70;
    },
    ...
}

这导致：

我对我当前的项目很满意，因为我总是有三个均匀分割的扇区，但是这不是一个完整的解决方案。我计算的角度很大程度上取决于偏移量。更改偏移量意味着对齐计算不再给出良好的结果。这里的大问题是，由于偏移量非常重要，改变扇区数量意味着该解决方案不再有效。

Answer 1

您在对齐函数中的代码确实帮助了我入门，但我希望定位有点不同，我编写了这段代码来根据段数量、所需的字体大小（用于正确的偏移）和宽度来计算位置画布的父级。

let numSectors = insert length of data array here;
let sectorDegree = 180 / numSectors;
let width = (canvas.parent().width() - parseInt(canvas.css('padding').replace("px", "") * 2));
let fontSize = 16;
let b = (width / 2) - 3;
let c = b - (fontSize * 1.8);
let a = Math.sqrt((Math.pow(b, 2) + Math.pow(c, 2)) - (2 * b * c * Math.cos((sectorDegree / 2) * Math.PI / 180)));
let offset = a - (fontSize * 1.2);
let alignAngle = (Math.asin(Math.sin((sectorDegree / 2) * Math.PI / 180) * c / a) * 180 / Math.PI) - (sectorDegree / 2);

datalabels: {
  display: true,
  anchor: 'end',
  font: {
    size: fontSize,
  },
  offset: offset,
  align: function(context) {
    return (sectorDegree * context.dataIndex) - alignAngle;
  },
}