Question

我遇到了一个挑战，我进展顺利，我需要使用chartjs来绘制此图表。我想我要做2种不同的画布，一个用于虚线上方的3个小节（当前mo，下一个mo，下一个mo），另一个用于虚线下方的2个小节（当前q，下一个q）。我正在研究最好的方法，感谢您的建议/帮助。我不知道如何为这样的酒吧设置不同的颜色：同一酒吧的蓝色，黄色和红色。

非常感谢您。

Answer 1

这会回答您标题中的问题：“相同颜色的条形/一个具有多种颜色的条形”。

这可以使用stacked bar chart完成。

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>

同一条不同颜色的条/一条多种颜色的条

1 个答案: