javascript - Chart.js 剪裁在线图之上

Question

我在 Chart.js 中有一个图表来显示过去 2 小时的外部温度，但是每当范围非常大时，图表就会被切断并夹在顶部，我尝试了很多方法来尝试修复它，但它是行不通的。我可以添加一个选项来帮助它相应地缩放到最大值吗？任何帮助，将不胜感激。谢谢。

图片:http://imgur.com/a/bFGWk

JavaScript(代码段):

var chart = new Chart(ctx, {
    type: 'line',

    data: {
        labels: labels,
        datasets: [{
            label: 'Outdoor Temperature',
            backgroundColor: graphBgColor,
            borderColor: graphBorderColor,
            data: tempdata,
            }]
    },


    options: {
        scaleLabel: " <%= Number(value / 1000) + ' MB'%>"
    }
});

Answer 1

要解决这个问题，您需要根据您的 tempdata 数组设置 y 轴刻度的最大值，如下所示:

options: {
   scales: {
      yAxes: [{
         ticks: {
            max: Math.max.apply(null, tempdata) + 1, //max value + 1
         }
      }]
   },
   ...
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var labels = ['Jan', 'Feb', 'Mar', 'Apr'];
var tempdata = [2, 4, 1, 3];
var graphBgColor = 'rgba(0, 119, 204, 0.1)';
var graphBorderColor = 'rgba(0, 119, 204, 0.5)';

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Outdoor Temperature',
         backgroundColor: graphBgColor,
         borderColor: graphBorderColor,
         data: tempdata,
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               max: Math.max.apply(null, tempdata) + 1, //max value + 1
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>