Javascript ChartJS在顶部和底部截取的折线图

我正在使用ChartJS显示一些天气数据。我遇到的问题是，从顶部和底部一直到边缘的线条看起来像是被切断了

我将一些示例数据放在一起，并将其上载到此代码笔：

有没有办法在最高点和最低点上方增加更多空间

我从中了解到有填充选项，但该选项影响整个画布，而不是图表本身

---

这里也有一些提示，但我不能真正在其中放入

suggestedMin

和

suggestedMax

值，因为我有多个数据集，它们的最小值和最大值略有不同。（例如，对于压力[hPa]，我不想将

suggestedMin

设置为0，因为它的值都在1200左右）

我想您已经基本了解了它，只是

选项

对象中的一个配置问题

您当前有以下选项：

options: {
   title: {
     display: true,
     text: 'Wetterdaten'
   },
   yAxes: [{
     ticks: {
       stepSize: 10
     }
   }]
}

但是缺少的是，

yAxes

数组属性必须位于

scales

对象内部。像这样：

options: {
   title: {
     display: true,
     text: 'Wetterdaten'
   },
   scales: {
     yAxes: [{
       ticks: {
         stepSize: 10
       }
     }]
   }
}

在

options

中使用此配置时，您的步长属性将生效，当仅显示温度数据时，图表顶部将为20

但是 现在，整个yAxis的

步长为10

，压力数据集变得异常。因此，对于这个问题，您可以实现两个雅克斯，其中压力数据位于右侧雅克斯，其他所有数据位于左侧雅克斯：

var weatherCanvas = document.getElementById('weatherChart').getContext('2d');
var weatherChart = new Chart(weatherCanvas, {
    type: 'line',
    title: 'Wetter',
    data: {
        labels: ["01-01", "02-01", "03-01", "04-01", "05-01", "06-01", "07-01", "08-01", "09-01"],
        datasets: [{
            label: 'Temperature[°C]',
            data: [14, 18, 18, 16, 14, 11, 11, 11, null],
            borderColor: "rgb(252, 74, 74)",
            yAxisID: 'left-y-axis'
        }, {
            label: 'Windspeed[km/h]',
            data: [14, 18, 18, 16, 14, 11, 11, 11, null],
            borderColor: "rgb(101, 219, 255)",
            hidden: true,
            yAxisID: 'left-y-axis'
        }, {
            label: 'Humidity[%]',
            data: [84, 88, 88, 86, 74, 71, 71, 71, null],
            borderColor: "rgb(101, 155, 255)",
            hidden: true,
            yAxisID: 'left-y-axis'
        }, {
            label: 'Pressure[hPa]',
            data: [1193, 1211, 1211, 1200, 1999, 1997, 1995, 1993, null],
            borderColor: "rgb(211, 211, 211)",
            hidden: true,
            yAxisID: 'right-y-axis'
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Wetterdaten'
        },
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                position: 'left',
                ticks: {
                    stepSize: 10
                }
            }, {
                id: 'right-y-axis',
                position: 'right',
                ticks: {
                    stepSize: 100
                }
            }]
        }
    }
});

下面是一个例子

---

我希望这会有所帮助。

显示了最近的修复程序。 您必须手动编辑Chart.js文件

src/controllers/controller.line.js

（对于Angular 2，此文件路径将位于目录

node\u modules/chart.js/

中）

或者只需等待下一个Chart.js版本，该版本很可能包含修复程序

本错误通知单注释1中描述了另一种解决方法：

请注意，我对一个相同的问题发表了相同的评论（尽管不是针对AngularJS）：

---

请确保将其他答案中的所有相关信息发布到本答案中。答案不仅应该包含链接，而且应该是有效的。我扩展了我的评论。非常酷，肯定有助于使图表看起来更好。就目前而言，这个解决方案是可行的，但由于这是一个已知的bug，我还将关注修复该问题的任何更新：）