javascript - 在条形图表中从底部向上提起条形图

Question

我想通过指定中间的填充来将条从 x 轴向上抬起。我试图探索几乎所有属性，但找不到这样做的方法。我正在使用 chart.js 作为库。

红框内标记的区域

Chart Image

注意:我无法使用 stackoverflow 工具插入图像，因此添加了直接 url

我尝试为栏的底部提供边框宽度并将其颜色设置为透明，但这也没有用。

Answer 1

您可以使用堆积条形图。

使用第一个系列作为轴的偏移量，透明色。

然后将实际数据减少偏移量，因此条形高度将以正确的值结束。

请参阅以下工作片段...

$(document).ready(function() {
  var offset = [200, 200, 200, 200];
  var data = [7900, 5400, 4300, 4300];
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['June 9', 'June 11', 'June 13', 'June 15'],
    datasets: [{
      data: offset,
      backgroundColor: 'transparent'
    }, {
      data: data.map(function (value, index) {
        return value - offset[index];
      }),
      backgroundColor: 'orange'
    }]
  }
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      },
      scales: {
        yAxes: [{
          stacked: true
        }]
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>