0
258
Views¿Cómo mostrar la etiqueta de tiempo específica en el eje x por Chart.js?
Estoy recopilando los datos de temperatura y humedad relativa todos los días. Quería mostrar estos datos con Chart.js y actualmente es posible mostrar todos mis datos. Pero me pregunto cómo mostrar la etiqueta de tiempo específica en el eje x de Chart.js .
Como puede ver, el eje x está demasiado "lleno" con la etiqueta de tiempo. Busqué en la documentación de Chart.js e intenté agregar autoskip y autoskippadding pero no pudo mostrar la etiqueta de tiempo objetivo.
xAxes: [{ ticks: { autoSkip: true, autoSkipPadding: 60 } }] 
Por lo tanto, como estos datos se recopilaron cada minuto y el tamaño de los datos es tan grande, ¿cómo puedo mostrar una etiqueta de tiempo específica solo en el eje x (00:00, 01:00, 02:00... y así sucesivamente) de modo que para evitar demasiado "lleno de gente"? Cualquier sugerencia es muy apreciada, ¡gracias!
1 answers
Answer question0
Puede definir el eje x como un eje cartesiano de tiempo de la siguiente manera:
scales: { x: { type: 'time', time: { parser: 'HH:mm:ss', unit: 'hour', displayFormats: { hour: 'HH:mm' }, tooltipFormat: 'D MMM YYYY - HH:mm:ss' } } }Eche un vistazo a su código modificado a continuación y vea cómo funciona. Este código ahora usa chartjs-adapter-moment junto con moment . Siéntase libre de usar un adaptador diferente.
$(function() { getXlsxData(); }); function getXlsxData() { var xlsxUrl = "https://script.google.com/macros/s/AKfycbw9PQRojIml3x5gnMMiKihnTh9aLODd86ankhoz0ETIu0a8tcVh1ZIc4R08hlw8nHF8pA/exec?id=1Bvzqyu_NvPdL-zsOShbKF5me2bjtVVWQCK9MDA2KW58&sheet=Today" var xlsxData = $.getJSON(xlsxUrl, function(data) { $.each(data.Today, function(i, el) { labels.push(el.Time); TodayTemperature.push(el.CurrentTemp); TodayRH.push(el.CurrentRH); }); load_chart(); }); } var labels = [], TodayTemperature = [], TodayRH = [] function load_chart() { var myChart = new Chart('alldata', { type: 'line', data: { labels: labels, datasets: [{ label: 'Temperature（°C）', fill: false, data: TodayTemperature, backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132, 0.8)', borderWidth: 1, radius: 0, }, { label: 'Relative Humidity （%）', fill: false, data: TodayRH, backgroundColor: 'rgb(255, 159, 64)', borderColor: 'rgb(255, 159, 64, 0.8)', hidden: true, borderWidth: 1, radius: 0, }, ] }, options: { responsive: true, maintainAspectRatio: false, legend: { position: 'bottom', }, layout: { padding: { top: 35, right: 15, } }, scales: { x: { type: 'time', time: { parser: 'HH:mm:ss', unit: 'hour', displayFormats: { hour: 'HH:mm' }, tooltipFormat: 'D MMM YYYY - HH:mm:ss' } } } } }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script> <canvas id="alldata" height="200"></canvas>