javascript - Chart.js sciptable 选项：访问数据对象的值？

Question

我正在从 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']？

Answer 1

我无法告诉您为什么它不起作用，但您可以在可编写脚本的函数中更改以下行。

从：

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