时间戳

首页 > 解决方案 > Chartjs 绘制折线图，​​其中线来回（按时间顺序）

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

问题描述

所以我想画一个折线图，其中线按时间顺序从一个点到另一个点，但点可以来回走动，所以线不仅要正确，还要向各个方向走。我真的不知道这是否可能，但到目前为止我还没有找到任何解决方案。

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

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

默认数据列表将第一个元素作为 Y 值，将第二个元素作为其所属的标签位置。在这种情况下，值 15 属于第二个位置的标签，这意味着 xaxis 中的数字 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);
    }
});

我现在得到的结果

我现在得到的结果

我想要的结果

我想要的结果

希望有人知道如何在可能的情况下解决它，或者在可能的情况下建议另一种工具。谢谢和对不起我的英语！

标签： jquerydjangochartsdatasetchart.js

解决方案

尝试在 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>

推荐阅读