Javascript 尝试使用highcharts在热图中实现变量时出现问题

我目前正在尝试使用highcharts模块在热图中绘制温度图（AMG8833）的值。随着值的实时更新，这些值将通过nodemcu板发送并在html文件中接收。这是非常奇怪的，因为当我试图用它自己绘制值时：（这部分代码对相机的每个像素重复）

及

当我这样做时，我在热图中得到的答案是，我试图放在热图中的变量是一个[object HtmlSpanement]，它没有放每个像素变量的实际值

有没有关于我做错了什么的线索？

---

非常感谢你的帮助

Hi@Ramon，在收到数据后，您可能没有更新序列数据。例如，您可以对点使用

update

方法。非常感谢你！！我实际做的是使用addPoint命令来引入这些值，这对我来说是可行的

setInterval(function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var pixel_0 = parseFloat(this.responseText);
        document.getElementById("pixel_0").innerHTML = pixel_0;
        pixel_0.innerHTML = pixel_0;
      }
    };
    xhttp.open("GET", "/pixels[0]", true);
    xhttp.send();
  }, 1000 );

  <h3>"The value for pixel 0 is: " <span id="pixel_0"></span></h3>

$(function () {
    $('#Thermographic_camera').highcharts({

      chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 8,
        plotBorderColor: '#FFFFFF'
      },


      title: {
        text: 'Thermographic camera'
      },

      xAxis: {
        categories: ['', '', '', '', '', '', '', ''],
      },

      yAxis: {
        categories: ['', '', '', '', '', '', '', ''],
        title: null
      },

      colorAxis: {
        //min: 0,
        //minColor: '#FFFFFF',
        //maxColor: Highcharts.getOptions().colors[8]

        stops: [
          [0, '#3060cf'],
          [0.5, '#fffbbc'],
          [0.9, '#c4463a']
        ],
        min: 20,
        max: 40
      },

      legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280

      },


      series: [{
        name: 'Value',
        borderColor: 'white',
        borderWidth: 1,
        data: [[0, 0, pixel_0],
          [0, 1, pixel_1],
          [0, 2, pixel_2],
          [0, 3, pixel_3],
          [0, 4, pixel_4],
          [0, 5, pixel_5],
          [0, 6, pixel_6],
          [0, 7, pixel_7],
          [1, 0, pixel_8],
          [1, 1, pixel_9],
          [1, 2, pixel_10],
          [1, 3, pixel_11],
          [1, 4, pixel_12],
          [1, 5, pixel_13],
          [1, 6, pixel_14],
          [1, 7, pixel_15],
          [2, 0, pixel_16],
          [2, 1, pixel_17],
          [2, 2, pixel_18],
          [2, 3, pixel_19],
          [2, 4, pixel_20],
          [2, 5, pixel_21],
          [2, 6, pixel_22],
          [2, 7, pixel_23],
          [3, 0, pixel_24],
          [3, 1, pixel_25],
          [3, 2, pixel_26],
          [3, 3, pixel_27],
          [3, 4, pixel_28],
          [3, 5, pixel_29],
          [3, 6, pixel_30],
          [3, 7, pixel_31],
          [4, 0, pixel_32],
          [4, 1, pixel_33],
          [4, 2, pixel_34],
          [4, 3, pixel_35],
          [4, 4, pixel_36],
          [4, 5, pixel_37],
          [4, 6, pixel_38],
          [4, 7, pixel_39],
          [5, 0, pixel_40],
          [5, 1, pixel_41],
          [5, 2, pixel_42],
          [5, 3, pixel_43],
          [5, 4, pixel_44],
          [5, 5, pixel_45],
          [5, 6, pixel_46],
          [5, 7, pixel_47],
          [6, 0, pixel_48],
          [6, 1, pixel_49],
          [6, 2, pixel_50],
          [6, 3, pixel_51],
          [6, 4, pixel_52],
          [6, 5, pixel_53],
          [6, 6, pixel_54],
          [6, 7, pixel_55],
          [7, 0, pixel_56],
          [7, 1, pixel_57],
          [7, 2, pixel_58],
          [7, 3, pixel_59],
          [7, 4, pixel_60],
          [7, 5, pixel_61],
          [7, 6, pixel_62],
          [7, 7, pixel_63],
        ],
        dataLabels: {
          enabled: false,
          color: '#000000'
        }
      }]

    });
  });