Chartjs отображает мои значения в позициях 0,1,2, а не их значения вдоль оси x

#javascript #graph #charts #chart.js

Вопрос:

У меня есть два линейных графика, первый работает нормально, а второй-всего 3 точки, которые лежат поверх первого, чтобы обозначить основную точку пика, пик слева и пик справа. Я передаю массив значений и меток для исходного линейного графика, и это отлично работает. Я также передаю массив values2 и labels2 для пиковых точек. Эти значения верны. Оба значения являются плавающими, и оба выглядят примерно так, как показано ниже, с разными значениями каждый раз, очевидно

 values2 = [-76.334, -90.648, -89.625]

labels2 = [1.83, 1.93546, 1.76815]
 

это мой код chartjs из моего html-файла

         <div id="canvas-holder">
        <canvas id="myChart" width="800" height="300"></canvas>
    </div>
    <script>
        var options = {
        type: 'line',
        data: {
            labels: {{ labels | safe }},
            datasets: [{
                    label: 'Value',
                    data: {{ values | safe }},
                    backgroundColor: 'white',
                    borderWidth: 1,
                    order: 2
                },
                {
                    label: 'Peak value',
                    data: [{
                    x: {{ labels2[0] | safe }},
                    y: {{ values2[0] | safe }}
                    }, {
                    x: {{ labels2[1] | safe }},
                    y: {{ values2[1] | safe }}
                    }, {
                    x: {{ labels2[2] | safe }},
                    y: {{ values2[2] | safe }}
                    }],
                    backgroundColor: 'black',
                    borderWidth: 5,
                    pointRadius: 5,
                    showLine: false,
                    order: 1
                }
            ]
        },
        options: {
            responsive: true,
        scales: {
            xAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
};

    var ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, options);
 

Если я правильно понимаю chartjs, я считаю, что это должно работать. Каждое значение сопоставляется с соответствующими значениями x и y, я не уверен, что в этом не так. Я был бы признателен за любую помощь.

Ответ №1:

Для всех, кто в будущем, я обнаружил, что переход на более старую версию chartjs сделал эту работу. Я не знаю, есть ли новый способ построения двух графиков или что-то еще, но я переключился на версию 2.9.X, и это сработало