Estoy recopilando datos de una API.
Viene en formato JSON:
[{'time':'08h00','magnitude':25, 'temper':12.6},{'time':'09h00','magnitude':39, 'temper': 5.3}]
Haciendo mi gráfico:
const ctx = document.getElementById('chart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: "Line Graph", data: [], parsing: { xAxisKey: 'time', yAxisKey: 'temper' }, borderColor: function(context) { var index = context.dataIndex; var value = context.dataset.data[index]; console.log(value); return value > 10 ? 'red' : 'green'; }, }] }, options: { scales: { x: { type: 'time', time: { unit: 'day', }, }, }, responsive: 'true', } });Luego lo relleno:
function addData(chart, data) { for (x in data) { chart.data.datasets[0].data.push(data[x]); } chart.update(); } $.getJSON("https://8.0.0.85/last_48_hours", function (data) { addData(chart, data) });Mi problema es con esto, que sale directamente de los documentos:
borderColor: function(context) { var index = context.dataIndex; var value = context.dataset.data[index]; console.log(value); return value > 10 ? 'red' : 'green'; }, porque el value es el Object {'time':'08h00','magnitude':25, 'temper':12.6}
var value = context.dataset.data[index].temper; y var value = context.dataset.data[index]['temper'];
y todo tipo de no funcionan. ¿Cómo puedo hacer referencia a value['temper'] ?
No puedo decirle por qué no funciona, pero puede cambiar la siguiente línea dentro de la función programable.
de:
var value = context.dataset.data[index].temper;a:
var value = context.dataset.data[index]?.temper; El problema es que context.dataset.data[index] a veces da como resultado undefined .
Por favor, eche un vistazo a su código modificado a continuación:
new Chart('myChart', { type: 'line', data: { datasets: [{ label: "Line Graph", data: [{ 'time': '08h00', 'magnitude': 25, 'temper': 12.6 }, { 'time': '09h00', 'magnitude': 39, 'temper': 5.3 }], parsing: { xAxisKey: 'time', yAxisKey: 'temper' }, borderColor: function(context) { var index = context.dataIndex; var value = context.dataset.data[index]?.temper; return value > 10 ? 'red' : 'green'; } }] }, options: { scales: { x: { type: 'time', time: { parser: 'HH\hmm', unit: 'day', }, }, }, responsive: 'true' } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script> <canvas id="myChart"></canvas>