javascript - 如何在 chart.js 中为极坐标图区域添加标签

Question

我正在显示极坐标图。但是如何在如下屏幕的饼图中显示标签

这是我的代码: Code

<canvas id="myChart"></canvas>
<script>

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'polarArea',
        data: {
            labels: ["Harmonia wewnetrzna", "Relacje towarzyskie", "Relacje damsko-meskie", "Finanse", "Zdrowie", "Hobby i czas wolny"],
            datasets: [{
                backgroundColor: [
                    "rgba(46, 204, 113, 0.7)",
                    "rgba(52, 152, 219, 0.7)",
                    "rgba(149, 165, 166, 0.7)",
                    "rgba(155, 89, 182, 0.7)",
                    "rgba(241, 196, 15, 0.7)",
                    "rgba(231, 76, 60, 0.7)"

                ],
                data: [50, 70, 20, 45, 90, 70],
                pointBackgroundColor: "rgba(255,99,132,1)",
                pointBorderColor: "red",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(255,99,132,1)"
            }]

        },
        options:{
            legend: {
                display: true,
                position: 'bottom'
            },
            animation : false,
            scale:{
                lineArc: true,
                angleLines: {
                    color: "rgba(204, 255, 51, 0.5)"
                },
                pointLabels: {
                    fontColor: "ff6666"
                },
                gridLines : {
                    color : "pink"
                },
                ticks: {
                    min: 0,
                    max: 100
                }
            }

        }
    });
</script>

Answer 1

您可以在图表的选项部分添加工具提示，它们会在悬停时显示，希望这段代码有所帮助(我知道这不是要求的部分内的显示，但在问题解决之前可能会有所帮助)。

    options: {
        responsive: true,
        legend: {
            display: false,
        },
        layout: {
            padding: 5
        },
        hover: {
            mode: 'nearest'
        },
        animation: {
            duration: 2000
        },
        tooltips: {
            titleFontSize: 0,
            bodyFontSize: 12,
            bodySpacing: 12,
            displayColors: false,
            callbacks: {
                label: function (tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var tooltip = dataset.tooltip[tooltipItem.index];
                    return items;
                },
            }
        },
    }