Chartjs绘制折线图， 其中线来回（按时间顺序）

Question

因此，我想绘制一个折线图，其中折线按时间顺序从点到点移动，但是点可以来回移动，因此折线不仅必须向正确的方向，而且还必须沿所有方向移动。我真的不知道这是否可行，但到目前为止我还没有找到任何解决方案。

我用空数据初始化一个新的折线图，并通过ajax传递一个球员（数据集）列表，每个球员都有一个按时间顺序排列的x和y点列表。例如：

data = {
    "labels": [3,4,5],
    "default": [[15,2],[25,0],[45,1]],
    "players": ["Max Ros"]
}
return Response(data)

默认数据列表的第一个元素为Y值，第二个元素为其所属的标签位置。在这种情况下，值15属于第二个位置的标签，即x轴上的数字5。

我现在能够将所有点绘制到每个数据集，但是该行遵循xaxis标签的顺序，而不是我插入点的顺序。

我的代码如下：

$.ajax({
    'method':'GET',
    'url': url,
    success:function(data) {
        console.log(data);
        chart = new Chart($('#myChart'), {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: []
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            fixedStepSize: 10,
                            beginAtZero: true
                        }
                    }],
                },
            }
        });
        data.players.forEach( function(a, i) {
            console.log(a);
            chart.data.datasets.push({
                label: a,
                data: [null],
                showLine: true,
                spanGaps: true
            });
            data.default[i].forEach( function(e, j) {
                console.log(e);
                chart.data.datasets[i].data[e[1]] = e[0];
            });
        });
        chart.update();
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
});

我现在得到的结果

我想要的结果

希望有人知道如何解决，或者在可能的情况下建议其他工具。谢谢，抱歉我的英语！

Answer 1

尝试在x轴上使用字符串值...

        labels: ['0', '1', '2'],
        datasets: [{
          label: data.players[0],
          data: [{x: '2', y: 15}, {x: '0', y: 25}, {x: '1', y: 45}]
        }]

请参阅以下工作片段...

$(document).ready(function() {
    var chart = new Chart($('#myChart'), {
        type: 'line',
        data: {
            labels: ['0', '1', '2'],
            datasets: [{
              label: 'Max Ros',
              data: [{x: '2', y: 15}, {x: '0', y: 25}, {x: '1', y: 45}]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        fixedStepSize: 10,
                        beginAtZero: true
                    }
                }],
            },
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>