Chart JS 中的极地区域在添加标签时旋转

Question

一段时间以来，我一直在努力解决这个问题。将标签添加到极坐标图后，线条和标签会轻微旋转，而绘制的实际数据会留在正确的位置，使图表看起来有点偏离。尝试从选项和数据对象中删除每个属性，但当我添加标签时它仍然旋转。有人知道为什么会这样吗？

Comparison Image

这是我的数据和选项对象：

type: 'polarArea',
data: {
    labels: ["NORTH", "EAST", "SOUTH", "WEST"],
    datasets: [{
        data: [24, 22, 20, 18, 20, 23, 19, 10, 8, 6, 23, 17],
        backgroundColor: 'rgb(255, 99, 132, 0.6)',
        hoverBackgroundColor: 'rgb(230, 99, 132)',
    }]
},
options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    scale: {
        angleLines: {
            display: true
        },
        pointLabels: {
            display: true
        },
        ticks: {
            beginAtZero: true,
            callback: function (value) {
                return value + "%";
            }
        },
    },
}

Answer 1

我通过将 chart.js 从版本 2.8.0 更新到 3.0.0-alpha 来修复此问题。仍然不确定为什么它在稳定版本上不起作用。

Chart JS 中的极地区域在添加标签时旋转

Polar Area in Chart JS Rotates When Adding Labels

javascript

vue.js

chart.js

vue-chartjs