代码之家 › 专栏 › 技术社区 › d-_-b

Chart.js如何修改现有图例

chart.js javascript

1

d-_-b · 技术社区 · 7 年前

如何在Chart.js中修改现有图例?

我见过创建自定义HTML图例的复杂方法(使用 generateLegend legendCallback ),以及一种简单的 options.legend.legendText

我希望向默认图例添加文本:

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

1 回复 | 直到 7 年前

1

2

d-_-b 7 年前

编辑:

我修改了作为内联插件的方法,以便 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>