编辑图例标签[vue-chart.js]

Question

我从vue-chart.js渲染了一个甜甜圈图，如何只编辑图例标签，例如如果我想在图例中显示“非常长...”并保留标签，例如因为它们将显示在工具提示中的悬停上。

export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
      }
    }
  }),
  mounted() {
    this.renderChart(this.chartdata, this.options);
  }
};

我该怎么做？

Answer 1

标签只是一个字符串数组，就我而言，我有：

<doughnut-chart
    :height="100"
    :options="pieChartCustomizations"
    :data="pieChartData"
/>

标签设置在pieChartData中，它是一个返回以下内容的计算属性：

{
        datasets: [
          /* Outer doughnut data starts */
          {
            data: [this.kpi.activities.total, this.kpi.products.total],
            backgroundColor: [
              'rgb(0, 255, 0)', // green
              'rgb(0, 0, 255)', // blue
            ],
          },
        ],
        //Change customize lablels via a computed property or even directly in the 
        options
        labels: ['Activites', 'Products'],
      };

所以您可以随便使用标签值，因为它们只是字符串