Question

我希望通过ChartJS实现以下目标，但不确定是否确实可行？我需要图形从0开始，但实际上我的柱线不会总是从图表的底部开始（它们可能但实际上我需要BarStart和BarEnd）。是否可以抵消它们以实现以下目标？

Answer 1

这可以从Chart.js v2.9.0开始支持floating bars。由于可以使用语法[min, max]指定各个条。

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7],
    datasets: [{
      type: 'bar',
      label: 'Green Bars',
      backgroundColor: 'green',
      data: [[3, 9.5],[2, 8.5],[4, 7],[1.5, 5.5],[3, 6.5],[3, 8.5],[4, 9]],
    }]
  },
  options: {
    responsive: true,
    legend: {
       display: false
    },
    scales: {
      yAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: 10,
          stepSize: 1
        }
      }],
    }
  }
});

canvas {
  max-width: 260px;
}

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

条形图不是从0开始

1 个答案: