Question

如何修改Chart.js中的现有图例？

我已经看到了创建自定义HTML图例的复杂方法（使用generateLegend或legendCallback）和一种简单的options.legend.legendText方法，该方法应该接受一个数组，但是没有变化因此假设该版本1。

我希望将文本添加到默认图例：

type: 'doughnut',
data: {
    datasets: [{
        data: series,
    }],
    labels: labels,                
},
options: {
   legend: {
     legendText = labels.map((label, index) => `${label} - ${series[index]}%`);
   }
}

Answer 1

编辑：

我注意到，如果重新绘制图表（例如，调整浏览器窗口的大小），图例将丢失多余的文本。

我已经修改了用作嵌入式插件的方法，以便在绘制图例之前修改label对象。

let labels = ['a', 'b', 'c', 'd'],
  series = [4, 2, 1, 3],
  myChart = new Chart(document.getElementById('chart'), {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        data: series,
        backgroundColor: ['red', 'blue', 'green', 'orange']
      }]
    },
    options: {
      maintainAspectRatio: false
    },
    plugins: [{
      afterLayout: function(chart) {
        let total = chart.data.datasets[0].data.reduce((a, b) => {
          return a + b;
        });
        chart.legend.legendItems.forEach(
          (label) => {
            let value = chart.data.datasets[0].data[label.index];

            label.text += ' - ' + (value / total * 100).toFixed(0) + '%'
            return label;
          }
        )
      }
    }]
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

Chart.js如何修改现有图例

1 个答案: