图例中的条形标签 [英] Bar labels in Legend

问题描述

我的问题类似于我想要具有饼图给出的相同输出，但是我不想创建多个数据集.我设法做到了，但是现在我找不到方法了.

I want to have to same output a pie chart give, but I do not want to create multiple datasets. I managed to do this, but now I can't find how.

这是我的代码示例:

 var myChart = new Chart(ctx, {
    type: type_p,
    data: {
        labels: ['Lundi','Mardi'],
        datasets: [{
            data: [50,20],
            backgroundColor: color,
            borderColor: color,
            borderWidth: 1
        }]
    }

我想要与饼图相同的图例，但要有条形图:

I want the same legend as a pie chart, but with a bar chart:

这是做到这一点的方法吗?

Is this a way to do this?

推荐答案

为此，您必须生成自定义标签(使用

To accomplish this, you would have to generate custom labels (using generateLabels() function) based on the labels array of your dataset.

legend: {
   labels: {
      generateLabels: function(chart) {
         var labels = chart.data.labels;
         var dataset = chart.data.datasets[0];
         var legend = labels.map(function(label, index) {
            return {
               datasetIndex: 0,
               fillStyle: dataset.backgroundColor && dataset.backgroundColor[index],
               strokeStyle: dataset.borderColor && dataset.borderColor[index],
               lineWidth: dataset.borderWidth,
               text: label
            }
         });
         return legend;
      }
   }
}

^{将此添加到您的图表选项中}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇstrong

var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'],
      datasets: [{
         data: [1, 2, 3, 4, 5],
         backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff'],
         borderColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff'],
         borderWidth: 1
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      legend: {
         labels: {
            generateLabels: function(chart) {
               var labels = chart.data.labels;
               var dataset = chart.data.datasets[0];
               var legend = labels.map(function(label, index) {
                  return {
                     datasetIndex: 0,
                     fillStyle: dataset.backgroundColor && dataset.backgroundColor[index],
                     strokeStyle: dataset.borderColor && dataset.borderColor[index],
                     lineWidth: dataset.borderWidth,
                     text: label
                  }
               });
               return legend;
            }
         }
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

这篇关于图例中的条形标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！