具有动态颜色的 ChartJS答案

【问题标题】：ChartJS with Dynamic Colors具有动态颜色的 ChartJS
【发布时间】：2018-02-17 11:50:53
【问题描述】：

我看到了你的帖子，除了左侧的“Stock”之外，是否有为每个条放置单独的标签，例如 18、82、22、80 沿着 y 轴向下？下面是我指的链接... ChartJS bar chart with legend which corresponds to each bar

【问题讨论】：

标签： chart.js

【解决方案1】：

您正在寻找类似以下的内容：

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>

【讨论】：

非常感谢。这让我很开心，这是我一直在寻找的，这解决了我的问题。