图表JS-GPX高程图的固定x轴和y轴比例

Question

我正在尝试从.gpx创建笛卡尔图。 我想创建这样的东西：

我正在使用Chart JS，但无法像这样缩放轴。 特别是，我不知道如何以5km的步长标记x轴以及如何放置标签 最终的仰角和距离。

我的代码是这样的：

function create_elevation_graph(labels, data){
    var ctx = document.getElementById('elevation-graph').getContext('2d');

    var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
    gradientStroke.addColorStop(0, "#f4b680");
    gradientStroke.addColorStop(1, "#8090f4");

    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: labels,
            datasets: [{
                label: 'Altitudine [m]',
                data: data,

                borderColor:               gradientStroke,
                pointBorderColor:          gradientStroke,
                pointBackgroundColor:      gradientStroke,
                pointHoverBackgroundColor: gradientStroke,
                pointHoverBorderColor:     gradientStroke
            }]
        },

        // Configuration options go here
        options: {
            aspectRatio: 1.1,
            elements: {
                point:{
                    radius: 0
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        userCallback: function(label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }

                        },
                    }
                }],
                xAxes: [{
                    ticks: {
                        min: 0,
                        stepSize: 5
                    }
                }]
            },
        }
    });
}

我有很多数据，并在调用上面的函数之前将它们四舍五入到小数点后第一位。

非常感谢！