Question

我正在使用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
                  }
              }]
            }
        }

但是它似乎无能为力，并且无论显示的数据中的最小值如何，它都会继续显示。

任何帮助将不胜感激。

谢谢。

Answer 1

将options部分移至图表创建：

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

Here's来自文档的示例。

Answer 2

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

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

2 个答案: