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

【问题标题】：Edit legend labels [vue-chart.js]编辑图例标签 [vue-chart.js]
【发布时间】：2019-12-11 09:24:45
【问题描述】：

我从 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);
  }
};

我该怎么做？

【问题讨论】：

标签： javascript vue.js chart.js vue-chartjs

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

所以你可以对标签值做任何你想做的事情，因为它们只是字符串

【讨论】：