0
283
ViewsCómo establecer líneas verticales para el nuevo día en el eje x en ChartJS v3.x
Tengo un gráfico que muestra datos de las últimas 2h, 8h, 24h o 48h. Esto se puede cambiar a través de botones en la página web. Cuando el intervalo de tiempo incluye la medianoche, me gustaría mostrar líneas verticales con pequeñas etiquetas (tal vez al pasar el mouse) a la medianoche que muestren la fecha (o el día de la semana) del día siguiente.
No he encontrado ningún recurso sobre cómo hacer eso en Chartjs 3. ¿Cómo haría esa tarea? 
Así es como creo el gráfico. "tiempo" es una matriz de tiempos de época:
chart = new Chart( document.getElementById('Chart'), { type: 'line', data: { labels: time, datasets: [ { label: dataObjects[start].label, backgroundColor: dataObjects[start].backgroundColor, borderColor: dataObjects[start].borderColor, fill: dataObjects[start].fill, data: dataObjects[start].data, yAxisID: 'A', }] }, options: { elements: {point: {radius: 0.5, borderWidth: 1}, line: {borderWidth: 3}}, maintainAspectRatio: false, scales: { x: { //max: last_time, type: "time", grid: {borderColor: color.time}, ticks: {color: color.time}, time: { unit: 'hour', tooltipFormat: 'dd.MM. HH:mm', displayFormats: { second: "HH:mm", minute: "HH:mm", hour: "HH:mm", day: "d.MM.", week: "d.MM." }, } }, A: { type: 'linear', grid: {borderColor: color.time}, position: 'left', ticks: {color: color.time}, suggestedMin: dataObjects[start].suggestedMin, suggestedMax: dataObjects[start].suggestedMax, title: {text: dataObjects[start].text, display: true, color: color.time} } }, plugins: { legend: {display: false} } } });2 answers
Answer question0
Puede usar un gráfico mixto para crear este gráfico combinando un gráfico de líneas y un gráfico de barras.
Aquí puedes ver un ejemplo:
https://codepen.io/alyf-mendonca/pen/dyZZoeB
HTML:
<div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>JS:
const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: [ '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00' ], datasets: [{ type: 'line', label: 'Bar Dataset', data: [20, 21, 23, 22, 21, 20, 23], borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.2)' }, { type: 'bar', label: 'Line Dataset', data: [0, 0, 0, 0, 50, 0, 0], fill: false, borderColor: 'rgb(54, 162, 235)' }] }; const config = { type: 'bar', data: data, options: { scales: { x: { stacked: true } } }, }; const myChart = new Chart( document.getElementById('myChart'), config );0
Podrías usar el complemento de anotación . En su caso, deberá cambiar la cadena que utilicé para determinar la ubicación correcta del eje x a la marca de tiempo de la medianoche que desea y luego tendrá una línea allí:
const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }] }, options: { plugins: { annotation: { annotations: { line1: { type: 'line', xMin: 'Green', xMax: 'Green', label: { enabled: true, content: 'end value' } }, line2: { type: 'line', xMin: 'Blue', xMax: 'Blue', label: { enabled: true, content: 'begin value' } } } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.3.1/chartjs-plugin-annotation.min.js"></script> </body>