javascript - ChartJS 折线图在顶部和底部被 chop

Question

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

我将一些示例数据放在一起并将其上传到此代码笔:https://codepen.io/anon/pen/zELEWd

有什么方法可以在最高点和最低点上方添加更多空间吗？

我读自this thread有填充选项，但那个会影响整个 Canvas 而不是图表本身。

还有一些技巧来自this stockoverflow question ，但我真的不能在其中放置 suggestedMin 和 suggestedMax 值，因为我在那里有多个数据集，它们的最小值和最大值都略有不同。 (例如，对于 Pressure[hPa]，我不想将 suggestedMin 设置为 0，因为它的值都在 1200 左右)

Answer 1

我认为您已经基本掌握了它，只是 options 对象中的一个配置问题。

您目前有以下选项:

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

但缺少的是 yAxes 数组属性必须位于 scales 对象内。像这样:

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

通过 options 中的此配置，您的 stepSize 属性将生效，当仅显示温度数据时，图表的顶部将为 20。

但是

现在整个 yAxis 的 stepSize 为 10，压力数据集变得异常。所以对于这个问题，你可以实现两个 yAxes，其中压力数据在右边的 yAxes 上，其他所有东西都在左边的 yAxes 上:

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
                }
            }]
        }
    }
});

这是一个reference to Axes Configuration还有一些例子。

希望对您有所帮助。