Thingboard组件问题：如何通过接口数据展示FFT图表

本人是HTML新手，使用示例代码可正常展示FFT图表，但将硬编码数据替换为从接口https://iot.nipa.cloud/api/plugins/telemetry/DEVICE/{DEVICE_ID}/values/timeseries?keys=f-data获取的数据后，页面仅显示空白区域。

原可正常运行的FFT示例代码 #

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['freq', 'amp'],
        [0.3125, 12.00946904],
        [0.625, 19.77160067],
        [0.9375, 21.62805324],
        [1.25, 4.915130609],
        [1.5625, 2.409452308],
        [1.875, 1.486234231],
        [2.1875, 1.034153919],
        [2.5, 0.777528488],
        [2.8125, 0.618033989],
        [3.125, 0.512835906],
        [3.4375, 0.440704541],
        [3.75, 0.390133291],
        [4.0625, 0.354479715],
        [4.375, 0.329748464],
        [4.6875, 0.31349616],
        [5, 0.304261588],
        [5.3125, 0.301265108],
        [5.625, 0.304261588],
        [5.9375, 0.31349616],
        [6.25, 0.329748464],
        [6.5625, 0.354479715],
        [6.875, 0.390133291],
        [7.1875, 0.440704541],
        [7.5, 0.512835906],
        [7.8125, 0.618033989],
        [8.125, 0.777528488],
        [8.4375, 1.034153919],
        [8.75, 1.486234231],
        [9.0625, 2.409452308],
        [9.375, 4.915130609],
        [9.6875, 21.62805324],
        [10, 19.77160067]
      ]);

      var options = {
        title: 'Fast Fourier transform',
        curveType: 'function',
        legend: { position: 'bottom' }
      };

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>

</html>

接口返回的数据格式 #

接口返回的value字段是窗口大小为256的数值数组字符串：

{
    "f-data": [
        {
            "ts": 1681114252202,
            "value": "[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255]"
        }
    ]
}

空白问题源于接口数据未适配Google Charts的要求，需按以下步骤修改代码：

1. 调整执行顺序：先异步获取数据再绘制图表 #

原代码同步执行，而接口请求是异步操作，必须等数据返回后再处理绘制逻辑。

2. 解析数组字符串 #

接口返回的value是字符串格式的数组，需用JSON.parse()转换为真实数组。

3. 生成符合要求的图表数据 #

Google Charts需要以['freq', 'amp']开头的二维数组，需给解析后的数值数组生成对应频率值（和原示例一致，步长0.3125，上限10）。

修改后的完整代码 #

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    // 替换为你的实际设备ID
    const DEVICE_ID = "你的设备ID";
    const API_URL = `https://iot.nipa.cloud/api/plugins/telemetry/DEVICE/${DEVICE_ID}/values/timeseries?keys=f-data`;

    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(fetchDataAndDrawChart);

    async function fetchDataAndDrawChart() {
      try {
        // 获取接口数据
        const response = await fetch(API_URL);
        const result = await response.json();
        
        // 解析数组字符串
        const ampArray = JSON.parse(result['f-data'][0].value);
        
        // 构建图表所需的二维数组
        const chartData = [['freq', 'amp']];
        ampArray.forEach((amp, index) => {
          const freq = 0.3125 * (index + 1);
          // 保持和原示例一致的频率范围
          if (freq <= 10) {
            chartData.push([freq, amp]);
          }
        });

        // 绘制图表
        var data = google.visualization.arrayToDataTable(chartData);
        var options = {
          title: 'Fast Fourier transform',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
      } catch (error) {
        // 错误提示，方便调试
        console.error('加载失败:', error);
        document.getElementById('curve_chart').innerHTML = '图表加载失败，请查看控制台错误信息';
      }
    }
  </script>
</head>

<body>
  <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>

</html>

额外说明 #

• 务必替换代码中的DEVICE_ID为你的实际设备ID。
• 加入了错误捕获逻辑，便于排查接口请求失败、数据格式异常等问题。
• 若需要展示全部256个数据点，可删除if (freq <= 10)的判断，同时可调整图表的坐标轴范围优化显示效果。

内容的提问来源于stack exchange，提问作者kritsada masanthia