Investigamos por diferentes espacios y así de este modo mostrarte la respuesta a tu duda, si tienes dificultades déjanos la pregunta y te respondemos con mucho gusto.
Solución:
Puede usar el complemento de anotación chart.js para dibujar fácilmente líneas en su gráfico sin tener que meterse con la representación manual de píxeles en su lienzo (el enfoque antiguo que le está dando errores). Tenga en cuenta que el complemento es creado y respaldado por el mismo equipo que chart.js y se menciona en los documentos de chart.js.
Aquí hay un codepen de ejemplo que demuestra la creación de una línea en un gráfico.
Una vez que agregue el complemento, simplemente configure annotation propiedades en la configuración de su gráfico. Aquí hay un ejemplo.
var myChart = new Chart(ctx,
type: 'line',
data:
labels: ["January", "February"],
datasets: [
label: 'Dataset 1',
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: [2, 10]
]
,
options:
responsive: true,
title:
display: true,
text: 'Chart.js Draw Line On Chart'
,
tooltips:
mode: 'index',
intersect: true
,
annotation:
annotations: [
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 5,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label:
enabled: false,
content: 'Test label'
]
);
Si está utilizando el MNP paquete chartjs-plugin-annotation.js, lo importante, que puede olvidar, es Registrarse el complemento
Entonces, antes que nada, instaló los paquetes npm (aquí para Reaccionar):
npm i react-chartjs-2 (depends on your framework)
npm i chartjs-plugin-annotation (always required)
Consulte Vue.js o Angular para conocer los paquetes que dependen de su marco.
Opción 1: registro de complemento global
import Line from 'react-chartjs-2';
import Chart from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Chart.plugins.register([ChartAnnotation]); // Global
// ...
render()
return (
Opción 2: registro de complemento por gráfico
import Line from 'react-chartjs-2';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
// ...
render()
return (
/* per chart */
chartData es equivalente a la data: { sección y chartOpts para options: { de la respuesta de jordanwillis. Consulte esta publicación de github para obtener más información.
Hay muchos otros complementos disponibles para chart.js.
si desea dibujar la línea de umbral, la forma más fácil es usar mixed Gráfico de linea.
Nota: Haz un array lleno con el valor de umbral y la longitud debe ser la misma que su conjunto de datos.
var datasets = [1, 2, 3];
var ctx = document.getElementById('chart').getContext('2d');
var thresholdValue = 2;
var thresholdHighArray = new Array(datasets.length).fill(thresholdValue);
var myChart = new Chart(ctx,
type: 'line',
data:
labels: [],
datasets: [
datasets, thresholdHighArray]
,
options:
responsive: true,
legend:
position: 'bottom',
,
scales:
xAxes: [
display: true,
scaleLabel:
display: true,
labelString: 'Readings'
],
yAxes: [
display: true,
scaleLabel:
display: true,
labelString: 'Reading ( °C )'
]
,
annotation:
annotations: [
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
borderColor: "red",
label:
content: "",
enabled: true,
position: "top"
]
);
;