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

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

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

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

我的代码是这样的：

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

    var gradientstroke = ctx.createLinearGradient(500,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
                    }
                }]
            },}
    });
}

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

非常感谢！