Question

我有一个使用ChartJS显示数据的条形图。根据条形图，我有数据：15, 2, 0, 11。

我可以在条形图中看到所有这些数据，除了0。是否有可能在0上启动条形图，所以我还可以在条形图中看到第四列的数据？

options: {
  legend: { display: false },
  scales: {
      yAxes: [{
          display: false,
      }],
      xAxes: [{
          display: true,
      }],
  },
  title: {
    display: false,
  }

}

Answer 1

经过几个小时的工作，我终于找到了一个洗液。没有chartjs配置来做它你必须自己画它。我们在Nuget Package Manager: Add Package函数

中执行此操作

＆＃13;

onComplete

＆＃13;

var ctx = document.getElementById("myChart").getContext('2d');
var datasets = [15, 2, 0, 11];
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["1", "2", "3", "4"],
    datasets: [{
      label: 'value',
      backgroundColor: '#F00',
      data: datasets
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    animation: {
      onComplete: function() {
        var dataSet = myChart.getDatasetMeta(0);
        dataSet.data.forEach(elm => { 
          if (datasets[elm._index] == 0) {
            ctx.fillStyle = '#F00';
            ctx.fillRect(elm._model.x - elm._view.width / 2, elm._model.y - 1, elm._view.width, 2);
          }
        })
      }
    }
  }
});

＆＃13;

Answer 2

因为您的Y轴值从0开始。因此，如果X轴中的值为0，则为零，并且不显示0的条形。因此，如果要在图表中显示0，则起点应小于0。

Answer 3

您可以尝试beginAtZero:true配置选项。

options: {
  legend: { display: false },
  scales: {
      yAxes: [{
          display: false,
          ticks: {
                beginAtZero:true
            }
      }],
      xAxes: [{
          display: true,
      }],
  },
  title: {
    display: false,
  }
}

Answer 4

我相信你说你在使用chartjs。这个问题已经有了答案here。

Answer 5

尝试一下，图表将从零开始。

   options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

使用ChartJS在0处开始条形图

5 个答案: