javascript - 想要在值为零时显示js条形图的一小部分

Question

我有这些条形图，有时会向用户显示零值。我想显示一些条形图，这样它看起来就不完全是空的，但数据连接到条形图的视觉表示。有什么方法可以让顶部数字为零，但每列中的值为 3(或较小的值)？这是代码和屏幕截图。一张截图有数据，另一张截图为零。我希望零图在零时仅显示一点橙色和绿色。谢谢

<canvas id="bar-chart" width="900" height="350"></canvas>

<script type="text/javascript">
    var ctx = document.getElementById("bar-chart");
debugger;
var data = {
  labels: ["Page Views", "Data Requests"],
  datasets: [{
    data: [<?php echo $databaseClass->totalViewsSelectedMonth($user_id, $year, 1);

      ?>, <?php 
      echo $databaseClass->isRfYearMonth($user_id, $year, 1);
      ?>],
    backgroundColor: ["orange", "green"]
  }]
}
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    "hover": {
      "animationDuration": 0
    },
    "animation": {
      "duration": 1,
      "onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.data[index];
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          });
        });
      }
    },
    legend: {
      "display": false
    },
    tooltips: {
      "enabled": false
    },
    scales: {
      yAxes: [{
        display: false,
        gridLines: {
          display: false
        },
        ticks: {
          max: Math.max(...data.datasets[0].data) + 20,
          display: false,
          beginAtZero: true
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
</script>

Answer 1

看起来像you can update the axes将您的图表设置为新的默认值。因此，使用其示例的修改形式，如下所示(修改以适合您的代码):

// ...
scales: {
    yAxes: [{
        display: false,
        gridLines: {
            display: false
        },
        ticks: {
            max: Math.max(...data.datasets[0].data) + 20,
            min: -3, // ADDED
            display: false,
            beginAtZero: true
        }
    }],
// ...

...会做你正在寻找的事情 - 附带的好处是 0 和 3 看起来不像相同的值，相对条形大小应该保持准确。