Chart.js在线图顶部剪切

时间:2017-07-12 23:26:44

标签: javascript graph charts chart.js chart.js2

我在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'%>"
    }
});

1 个答案:

答案 0 :(得分: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>