同条不同色 一条多色

Question

我有一个挑战，我很顺利，我需要做这个图表使用chartjs。我想我要做2个不同的画布，一个是虚线以上的3个条形图（当前月，下月，后续月），另一个是虚线以下的2个条形图（当前q，下月q）。我正在研究最好的方法，感谢您的建议help。我不知道如何为同一个条形图设置不同的颜色：同一条形图的蓝色、黄色和红色。

非常感谢您。

Answer 1

这回答了你标题中的问题。"相同的柱子不同的颜色 一个柱子有很多颜色"

这可以通过以下方法来实现 叠加条形图.

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['CURRENT MO.', 'NEXT MO.', 'FOLLOWING MO.'],
    datasets: [{
        label: '',
        data: [1.6, 1.15, 1],
        backgroundColor: 'rgb(255, 255, 255)',
        hoverBackgroundColor: 'rgb(255, 255, 255)'
      },
      {
        label: 'CERTAIN',
        data: [0.15, 0.3, 0.45],
        backgroundColor: 'rgb(119, 185, 229)'
      },
      {
        label: 'EXPECTED',
        data: [0.45, 0.7, 0.6],
        backgroundColor: 'rgb(231,200,28)'
      },
      {
        label: 'UNLIKELY',
        data: [0.25, 0.35, 0.45],
        backgroundColor: 'rgb(238, 63, 55)'
      },
    ]
  },
  options: {
    responsive: true,
    tooltips: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          min: 0.5,
          max: 3
        }
      }],
      yAxes: [{
        stacked: true,
        gridlines: {
          display: false
        }
      }]
    },
    legend: {
      display: [false, true, true, true]
    },
    title: {
      display: true,
      text: 'Where Are We Going to Land?'
    }
  }
});

canvas {
  max-width: 500px;
}

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