#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, и это сработало