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

Question

我从 vue-chart.js 渲染一个圆环图，如果我有 'very long string' 我想在图例中显示 'very lo...' 并保留，我如何才能只编辑图例标签悬停在工具提示中时显示的标签。

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 中，这是 returns:

的计算属性

{
        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'],
      };

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

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

Edit legend labels [vue-chart.js]

javascript

vue.js

chart.js

vue-chartjs