ChartJS mit dynamischen Farben

Question

Ich habe Ihren Beitrag gesehen, Statt nur "Stock" auf der linken Seite, gibt es sowieso eine separate Beschriftung für jeden Balken, zB 18, 82, 22, 80 entlang der y-Achse ? Unten ist der Link, Im refering ... ChartJS bar chart with legend which corresponds to each bar

Es wäre hilfreich, wenn jemand das Problem beheben könnte.

Answer 1

Wenn ich nicht falsch bin, Sie suchen etwas wie folgt aus:

var chart = new Chart(ctx, { 
 
    type: 'horizontalBar', 
 
    data: { 
 
     labels: [18, 82, 22, 80], 
 
     datasets: [{ 
 
     data: [1, 2, 3, 4], 
 
     backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff'], 
 
     borderColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff'] 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     xAxes: [{ 
 
      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, 
 
        text: label, 
 
        fillStyle: dataset.backgroundColor[index], 
 
        strokeStyle: dataset.borderColor[index], 
 
        lineWidth: 1 
 
        } 
 
       }); 
 
       return legend; 
 
      } 
 
     } 
 
     } 
 
    } 
 
});

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