Código personalizable de gráficos Chart.js con múltiples tipos y ejes y – parte 2

Siguiendo con el código de Chart.js 2.x, después de la parte 1 sobre Chart.js donde discutimos la visualización de múltiples líneas en el gráfico, continuamos presentándote algunas modificaciones adicionales que podrían ser necesarias según tus requisitos en la parte 2 de este artículo.

Además de las múltiples líneas, tendremos múltiples ejes y, lo cual es una propiedad muy importante cuando deseas mostrar múltiples líneas con diferentes indicadores de datos en el mismo gráfico.

Aspectos destacados en esta publicación:

  • Mostrar múltiples columnas de ejes y, con anotaciones de colores correspondientes.
  • Conectar la línea de 2 puntos con datos o 2 puntos adyacentes.
  • Ignorar el punto vacío o no ignorarlo.
  • Mostrar y ocultar las líneas con un solo clic.
Conecte la línea de 2 puntos con datos e ignore el punto vacío.

Conecte los 2 puntos adyacentes y no ignore el punto vacío.
Muestra y oculta las líneas con la etiqueta del encabezado con un solo clic.

1. Etiqueta HTML para mostrar el gráfico

<div class=”chart-container” style=”position: relative; height:auto; width:50%; margin:0 auto”>
<canvas id=”myChart” width=”900″ height=”300″></canvas>
</div>

2. Establecer datos predeterminados recuperados de la base de datos

$data_source = [
“labels” => [‘2020-01’, ‘2020-02’, ‘2020-03’, ‘2020-04’, ‘2020-05’],
“el1” => [‘1’, ‘3’, null, null, ‘2’],
“el2” => [’11’, null, ’22’, ‘null’, ’33’],
“el3” => [’14’, ’25’, ’26’, ’30’, ’33’]
];

3. CSS

<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>

4. Cargar la biblioteca ChartJS

<script src=”assets/chartjs/2.13.0moment.min.js”></script>
<script src=”assets/chartjs/2.8.0Chart.min.js”></script>
<script src=”assets/chartjs/utils.js”></script>

5. Mostrar gráfico con datos

<script>
var datas = <?php echo json_encode($data_source); ?>;
var ctx = document.getElementById(‘myChart’);
var myChart = new Chart(ctx, {
type: ‘line’,
data: {
labels: datas[“labels”],
datasets: [
{
label: ‘Label1’,
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: datas[“el1”],
borderColor : “red”,
backgroundColor : “red”,
lineTension: 0, // strainghtlines
yAxisID: ‘Label1’,
},
{
label: ‘Label2’,
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: datas[“el2”],
borderColor : “blue”,
backgroundColor : “blue”,
lineTension: 0, // straightlines
yAxisID: ‘Label2’
},
{
label: ‘Label3’,
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: datas[“el3”],
borderColor : “#a9a518”,
backgroundColor : “#a9a518”,
lineTension: 0,
yAxisID: ‘Label3’
},
]
},
options: {
responsive: true,
title: {
display: true,
text: ‘Label’
},
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: ‘Label’
}
}
]
},
scales: {
yAxes: [
// {
//     ticks: {
//         beginAtZero: true // Common set all: set start y column = 0
//     }
// },
{
id: ‘Label3’,
type: ‘linear’,
position: ‘left’,
ticks: {
min: 0,
fontColor: “#a9a518”, // color of yAxes
},
},
{
id: ‘Label2’,
type: ‘linear’,
position: ‘left’,
ticks: {
min: 0,
fontColor: “blue”, // color of yAxes
},
},
{
id: ‘Label1’,
type: ‘linear’,
position: ‘left’,
ticks: {
min: 0,
fontColor: “red”, // color of yAxes
},
},
]
},
// true: connect the 2 point line, ignoring the empty point
// false: connect 2 adjacent points, do not ignore the empty point
spanGaps: false
}
});
</script>

Descargar código personalizable de gráficos Chart.js

1 comentario en «Código personalizable de gráficos Chart.js con múltiples tipos y ejes y – parte 2»

Deja un comentario