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

【问题标题】：How to add label in chart.js for polar chart area如何在chart.js中为极坐标图区域添加标签
【发布时间】：2017-03-23 13:21:22
【问题描述】：

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

这是我的代码： 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>

【问题讨论】：

请在此问题中添加您的代码，以便如果人们有与您相同的问题，他们可以立即看到代码，谢谢。
这个问题也出现在饼图中并且仍然存在github.com/chartjs/Chart.js/issues/3289

标签： javascript canvas chart.js

【解决方案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;
                },
            }
        },
    }

【讨论】：

【解决方案2】：

还有另一个库名称 chartnew.js（chart.js 的修改版本），您可以使用它来实现。图表 https://github.com/FVANCOP/ChartNew.js/.

使用inGraphDataShow : true

Chart generator 这个图表：

【讨论】：