Question

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

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

有没有办法在最高点和最低点之上添加更多空间？

我从this thread读到了填充选项，但是那个影响了整个画布，而不是图表本身。

this stockoverflow question还提供了一些提示，但我无法在其中设置suggestedMin和suggestedMax值，因为我在那里有多个数据集所有的最小值和最大值都略有不同。（例如，对于压力[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。

BUT

现在stepSize for the entire yAxis is 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，其中包含一些示例。

我希望这会有所帮助。

Answer 2

显示了最近的修复程序here。您必须手动编辑Chart.js文件src/controllers/controller.line.js （对于Angular 2，此文件路径将位于目录node_modules/chart.js/内。）

或者只是等待下一个很可能包含修复的Chart.js版本。

此错误标记的评论1中描述了另一种解决方法：https://github.com/chartjs/Chart.js/issues/4202

请注意，我在相同的问题上发布了相同的评论（虽然不适用于AngularJS）： https://stackoverflow.com/a/47306019/3061684

ChartJS折线图在顶部和底部切断

2 个答案:

BUT