Necesito crear un gráfico de líneas, por ejemplo img.
1) No entiendo, cómo eliminar el fondo gris. 2) Agregue el punto dinámico 0.38 y 2225 y agregue la línea. Ayuda por favor.
Este es mi código
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext("2d");
var data = {
labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
datasets: [
{
type: 'line',
label: 'Basic',
data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
}
]
};
var myNewChart = new Chart(ctx , {
type: "line",
data: data
});
2 respuestas
1) Aquí hay un ejemplo de cómo mostrar solo la línea y no el relleno a continuación. Básicamente, solo usa la opción fill: false
.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:
[0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
datasets: [{
label: 'Dataset 1',
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Drsw Line on Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
}
});
2) No hay nada integrado nativamente en chart.js para dibujar líneas en el gráfico, sin embargo, el mismo equipo ha creado un buen complemento llamado chartjs-plugin-annotation que puedes usar para hacer esto. Aquí hay un ejemplo de cómo configurar una línea en el punto que desea (esto iría dentro de su configuración options
.
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2225,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label: {
enabled: true,
content: 'Point Label',
yAdjust: -16,
}
}]
}
Aquí hay un ejemplo de codepen que demuestra esto.
1) Intente agregar conjuntos de datos:
fill: false,
A su conjunto de datos
2) No estoy segura de que esto sea posible
Esto sería un comentario pero aún no puedo comentar.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.