Chart.js条形图不会从零开始作为最小值

hc8w905p  于 2023-02-12  发布在  Chart.js
关注(0)|答案(2)|浏览(195)

我正在使用Chart.js显示一个折线图,它工作正常,只是我希望y轴从0开始作为最小值。现在,y轴从显示的数据中的任何最小值开始。我希望它总是从零开始显示。
这是我正在使用的代码(它可以工作,只是不从y轴上的0开始):

<script type="text/javascript">
        $(document).ready(function(){
    $.ajax({
        url : "Get data from here",
        type : "GET",
        success : function(data){
            console.log(data);

      var userid = [];
      var viewers = [];

      for(var i in data) {
        userid.push(data[i].date_time);
        viewers.push(data[i].viewers);

      }

      var chartdata = 
        {
        labels: userid,
        datasets: 
                [
                    {
                    label: "Viewers for <?php echo $month . " - " . $year; ?>",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(59, 89, 152, 0.75)",
                    borderColor: "rgba(59, 89, 152, 1)",
                    pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                    pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                    data: viewers,
                    options: 
                        {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                        }
                                    }]
                                }
                        }
                    }
                ]
        };

      var ctx = $("#mycanvas");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error : function(data) {

    }
  });
});
</script>

我添加了这部分:

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

但它似乎没有做任何事情,并继续显示从任何最小值的数据显示。

bn31dyow

bn31dyow1#

options部件移至图表创建:

var LineGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

这里有一个来自文档的例子。

wsxa1bj1

wsxa1bj12#

options: {
     resposive: true,
     scales: {
             y: {
                suggestedMin: 0,
                suggestedMax: 100
                }
             }
     }

相关问题