条形图不是从0开始

问题描述 投票:0回答:1

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

Example Graph I need to achieve

chart.js
1个回答
1
投票

这可以从支持Chart.js v2.9.0floating 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>
© www.soinside.com 2019 - 2024. All rights reserved.