Блог

Я собираю данные с помощью API.

Поставляется в формате JSON:

[{'time':'08h00','magnitude':25, 'temper':12.6},{'time':'09h00','magnitude':39, 'temper': 5.3}]

Составляю свою карту:

 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',
        }
    });
 

Затем я заполняю его:

 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)
    });
 

Моя проблема связана с этим, что вытекает прямо из документов:

  borderColor: function(context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    console.log(value);
                    return value > 10 ? 'red' : 'green';
                },
 

потому value что это целое Object {'time':'08h00','magnitude':25, 'temper':12.6}

var value = context.dataset.data[index].temper; и var value = context.dataset.data[index]['temper'];

и всякое такое не работает. Как я могу ссылаться value['temper'] ?

Я не могу сказать вам, почему это не работает, но вы можете изменить следующую строку внутри скриптовой функции.

От:

 var value = context.dataset.data[index].temper; 
 

Для:

 var value = context.dataset.data[index]?.temper;
 

Проблема в том, что context.dataset.data[index] иногда это приводит к undefined .

Пожалуйста, ознакомьтесь с вашим измененным кодом ниже:

 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: 'HHhmm',
          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>