Question

我是网络开发的新手，我正在尝试找出如何根据getJSON的响应显示图像。接收的数据来自REST API。然后将数据存储在2个阵列中，潮湿和日期。潮湿含有湿度作为一个字符串。然后将潮湿阵列转换为整数阵列 - 潮湿_最终。我想知道如何根据humid_final数组中的特定值在屏幕上显示某个图像。

如果humid_final数组中的最新条目= 50显示图像A.否则显示图像B.（其中图像A，B是本地存储的静态图像）。

$(function updat() {
  var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var humid = [],
    date = [],
    humid_final = []

  $.getJSON(url, function (json) {

    $(json['Items']).each(function(i, data) {
      //Store indicator name
      
      // fill the date array
      humid.push(data.humidity);
      // fill the string data array 
      date.push(data.Date);
    });

    console.log(date);
    // query send string that we need to convert into numbers
    for (var i = 0; i < humid.length; i++) {
      if (humid[i] != null) {
        humid_final.push(parseFloat(humid[i]))
      } else {
       humid_final.push(null)
      };
    }

    var chart = new Highcharts.Chart({
      chart: {
        type: 'spline',
        renderTo: 'container'
      },
      title: {
        text: 'indicatorName'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: 'Source: World Bank Data'
      },
      xAxis: {
        categories: date //.reverse() to have the min year on the left 
      },
      series: [{
        name: 'humidity',
        data: humid_final //
      }]
    });

  }); //getJSON method
  setTimeout(updat, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "opendataAPI.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

你几乎就在那里。将html中的图片标记设为id并使其指向标准图片imageB，如<img id="changingImage" src="./images/imageB.png" />

然后让我们试着翻译一下......

If the latest entry in humid_final array= 50 display image A. Else display image B.

进入javascript：

if (humid_final[humid_final.length-1] == 50) {
    document.getElementById('changingImage').src="./images/imageA.png";
}

根据getJSON数据的响应显示图像

1 个答案: