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看起来不像相同的值，相对条尺寸应保持准确。

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

1 个答案: