График js нарисуйте линейный график, где линия go вперед и назад (в хронологическом порядке) - PullRequest
1 голос
/ 10 марта 2020

Итак, я хочу нарисовать линейный график, где линия проходит от точки к точке в хронологическом порядке, но точки могут go взад и вперед, поэтому линия должна будет go все направления не только правильные. Я действительно не знаю, возможно ли это, но я пока не нашел решения.

Я инициализирую новую линейную диаграмму с нулевыми данными и прохожу через ajax список игроков (наборов данных) и у каждого из них есть список точек с x и y в хронологическом порядке. Например:

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

В списке данных по умолчанию первый элемент имеет значение Y, а второй - позицию метки, к которой он принадлежит. В этом случае значение 15 принадлежит метке во 2-й позиции, что означает число 5 в оси x.

Теперь я могу нарисовать все точки для каждого набора данных, но линия следует порядку меток оси x. а не тот, в который я вставил точки.

Мой код следующий:

$.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);
    }
});

Результат, который я получаю сейчас

The result I get now

Результат, который я хочу

The result I want

Надеюсь, кто-то знает, как решить это в случае, если это возможно, или, возможно, предложить другой инструмент, где это возможно. Спасибо и извините за мой английский sh!

1 Ответ

0 голосов
/ 11 марта 2020

попробуйте использовать строковые значения на оси х ...

        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>
...