如何在 PolarArea chart.js vue-chartjs 上格式化标签

Question

我已经安装了 vue chartjs 并且 我想格式化标签/显示

95.7%

而不是屏幕截图中的原始

0.957

。我在这里尝试的相同设置适用于

Line

图表，但无法使其在

PolarArea

.

中工作

    "chart.js": "^4.3.0",
    "vue-chartjs": "^5.2.0",

    polarOptions() {
      return {
        plugins: {
          // tried a plugin, no luck..
          labels: {
            type: "percentage",
            render: "percentage",
            fontColor: ["green", "white", "red"],
            precision: 2,
          },
        },

        // tried this extra, no luck
        tooltips: {
          callbacks: {
            label: function (tooltipItem: any) {
              return tooltipItem.rLabel.toFixed(0);
            },
          },
        },

        scales: {
          r: {
            ticks: {  
              // exactly this works just fine on Line chart, but not here
              callback: (value: number) => `${(value * 100).toFixed()}%`,
              format: {
                style: "percent",
              },
            },
          },
        },
      };
    },

Answer 1

所以

plugins.tooltip.callbacks.label

似乎完成了这项工作。

我不喜欢它的样子，很高兴看看有没有更顺畅的方法

    polarOptions() {
      return {
        plugins: {
          tooltip: {
            callbacks: {
              label(context: any) {
                const value = (context.raw * 100).toFixed(1);
                return `${context.dataset.label}: ${value}%`;
              },
            },
          },
        },
      ...