Как нарисовать наклонную линию в Chartjs
Я пробую некоторые графические библиотеки JavaScript с открытым исходным кодом (точки и линии), которые запускаются на странице браузера, чтобы проверить, какая из них лучше.
Посмотрев пример на codepen.io, я наткнулся на Chart.js, который использует канавы для рисования точек и многих других форм (например, столбцов, круговой диаграммы и т. д.).
Можно ли нарисовать на графике холста собственную наклонную линию?
Что-то вроде
я попробовал поставить
// Start a new Path
ctx.beginPath();
ctx.moveTo(300, 0);
ctx.lineTo(0, 300);
// Draw the Path
ctx.stroke();
после инициализации графа, поэтому он должен быть нарисован после инициализации графа.
Посмотрите фрагмент.
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [
10, 5, 2, 10, 4, 1, 10
],
fill: false,
}, {
label: "My Second dataset",
fill: false,
data: [
8, 3, 8, 6, 8, 8, 8
],
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(600, 150);
// Draw the Path
ctx.stroke();
};<script src = "https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id = "container" style = "width: 75%;">
<canvas id = "canvas"></canvas>
</div>Посмотрите результат и...
Ничего не произошло. :(
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используя отладчик браузера, вы можете увидеть нарисованную линию, но затем немедленно перезаписанную диаграммой. Например, установите точку останова на ctx.stroke(); и перешагните ее. (Я встроил ваш код в существующую диаграмму, которая у меня была, и поэтому смог использовать отладчик Chrome - не уверен, что можно отлаживать фрагменты.)
Эту проблему можно решить, переместив код рисования в событие завершения, как определено здесь:
animation: {
onComplete: function() {
var ctx = document.getElementById("canvas").getContext("2d");
// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(600, 150);
// Draw the Path
ctx.stroke();
}
}
Использование этого конкретного события завершения было предложено здесь.
С учетом вышесказанного вы также можете рисовать линии, используя масштаб(ы) диаграммы для координат, используя плагин «Line Annotations», chartjs-plugin-annotation.min.js документированный здесь. Опять же, здесь используются координаты диаграммы, а не абсолютные координаты холста.
Кстати, согласно моему тесту, 0,0 — это верхний левый угол. И, естественно, система координат холста не учитывает содержимое диаграммы, поэтому ее ценность ограничена. Опять же, плагин для аннотаций линий кажется лучшим путем, если вы можете рисовать, используя координаты графика.
Вот ваш фрагмент с обратным вызовом, используемым для вызовов рисования на холсте.
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [
10, 5, 2, 10, 4, 1, 10
],
fill: false,
}, {
label: "My Second dataset",
fill: false,
data: [
8, 3, 8, 6, 8, 8, 8
],
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
animation: {
onProgress: function() {
var ctx = document.getElementById("canvas").getContext("2d");
// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(600, 150);
// Draw the Path
ctx.stroke();
},
onComplete: function() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(600, 150);
ctx.stroke();
}
}
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};<script src = "https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id = "container" style = "width: 75%;">
<canvas id = "canvas"></canvas>
</div>P.S. «С учетом вышесказанного вы также можете рисовать линии, используя масштаб(ы) диаграммы для координат, используя плагин «Line Annotations»chartjs-plugin-annotation.min.js». Я искал ваш ответ, используя onComplete: с функцией обратного вызова. Линейные аннотации представляют собой только прямые линии. Еще раз спасибо, ты заслужил мое уважение.
Ммм, что-то не так после тестирования кода. Если вы наведете указатель мыши на точку, новая анимация заставит линию каждый раз исчезать, а затем вскоре снова появляться. Есть ли способ избежать этого? Он должен оставаться на графике. Я не могу принять ответ таким образом.
@ Computable «Вы можете перерисовать каждый шаг анимации (с помощью обратного вызова onProgress), обновив фрагмент. По сути, каждый раз, когда диаграмма обновляется — опять же, потому что рисунок холста не знает о диаграмме — линия требует перерисовки, поэтому могут быть и другие случаи с которым вы столкнетесь. С помощью линейной аннотации вы можете нарисовать любой уклон». Пожалуйста, дополните свой ответ небольшим примером, чтобы рисунок остался на графике.
@ Вычислимое, ок! Я не видел вашего фрагмента. Линия стойкая. После некоторых попыток вы также можете удалить onComplete и оставить только onProgress: function() {. Спасибо за ваш ответ. Он работает и работает очень хорошо. Ответ снова ваш 😘
@ Вычислимо, если честно, я не знаю, как установить точку останова в отладчике браузера. Также я не использую Google Crome. Браузер, которым я сейчас пользуюсь, это Opera. Я был почти уверен, что его перезапишут, иначе это было бы невозможно. В любом случае, я искал именно предложенный вами ответ. Ваш код идеален и выполняет именно тот запрос. Ставьте палец вверх, а также спасибо за обновление фрагмента. Ответ принят! Теперь я могу нарисовать линию, используя onComplete. Люблю тебя 🥀😘❤️