javascript - 图表 js 图表条形图不显示从 0 开始的数据

Question

我有一个图表 js 条形图。它不显示从 0 开始的数据。如果值为 3 和 7，则图表将 3 作为 y 轴起点，7 作为最高点。类似地，如果我有 5 和 8，我将使第一个栏为空，第二个栏可见。

我补充说:

options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }

我的代码:

$(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var name = [];
                    var marks = [];

                    for (var i in data) {
                        name.push(data[i].label);
                        marks.push(data[i].y);
                    }
                    console.log(name);
                    console.log(marks);

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]

                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }

Answer 1

尝试选项 ticks.beginAtZero，查看以下工作片段...

$(document).ready(function() {
  var chartdata = {
    labels: ['a', 'b'],
    datasets: [{
      label: 'Student Marks',
      backgroundColor: '#49e2ff',
      borderColor: '#46d5f1',
      hoverBackgroundColor: '#CCCCCC',
      hoverBorderColor: '#666666',
      data: [3, 7]
    }]
  };

  var graphTarget = $("#graphCanvas");

  var barGraph = new Chart(graphTarget, {
    type: 'bar',
    data: chartdata,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: 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="graphCanvas"></canvas>