如何删除极区图 Chart.js 的刻度或内圈答案

【问题标题】：How do I remove the ticks or inner circles of my polar area chart Chart.js如何删除极区图 Chart.js 的刻度或内圈
【发布时间】：2022-01-07 04:23:17
【问题描述】：

我已经在 Jquery 中为我的图表编写了代码，并且我正在使用该图表在我的 Django 网页上显示数据，我想删除我认为称为刻度的内圈以及显示的小数字他们。我尝试过使用

滴答声：{ 显示：假， }

和

规模：{ 显示：假， }

但是没有运气，我不知道该怎么做。

图表代码：

            new Chart("chart_{{ i.pk }}_{{ t.pk }}", {
              type: "polarArea",
              data: {
                labels: labels_{{ t.pk }},
                datasets: [{
                  fill: true,
                  pointRadius: 1,
{#                  borderColor: backgroundColors_{{ t.pk }} ,#}
                  backgroundColor: backgroundColors_{{ t.pk }} ,
                  data: totals_{{ i.pk }}_{{ t.pk }}_arr,
                }]
              },
              options: {
                responsive: false,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: false,
                    },
                    scale: {
                        ticks: {
                            display: false,
                        },
                        gridLines: {
                                display: false,
                                lineWidth: 7,
                                tickMarkLength: 30// Adjusts the height for the tick marks area
                        },
                        
                    },
                    title: {
                        display: false,
                        text: 'Chart.js Polar Area Chart'
                    }
                }
              }
            });

        {% endfor %}
    {% endfor %}
{% endblock %}

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/a/63313163/2358409

标签： javascript jquery django chart.js

【解决方案1】：

在 v3 中，radialLinear 比例不再配置在 scale 对象中，但也在 scales 命名空间中配置，命名空间 r 用于径向。此外，它不应该在插件部分中配置，而是在选项对象的根目录中。最后，gridLines 已重命名为 grid。

对于 V2 和 V3 之间的所有更改，请阅读migration guide

活生生的例子：

const options = {
  type: 'polarArea',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      r: {
        ticks: {
          display: false // Remove vertical numbers
        },
        grid: {
          display: false // Removes the circulair lines
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

【讨论】：