Question

我正在使用Google Charts而我正在尝试将多个图表添加到一个json调用中。

图表样式是规范。

以下示例仅适用于一个标尺“field1”我对图表并不是那么出色，但我确实创建了一个更新的工作示例。

我想要添加的是另外两个量规，json数组名称是Tlak，Vlhkost。所以json看起来像这样{“created_at”：“2017-04-19T17：05：54Z”，“entry_id”：4381，“field1”：“1.00 \ r \ n \ r \ n”，“field2” ： “83”}

我如何添加一个量规？

<html>
  <head>

  <title>Google Gauge - ThingSpeak</title>


  </head>

  <body>
    <div id="container">
      <div id="inner">
        <div id="gauge_div"></div>
      </div>
    </div>
  </body>
</html>

//css

<style type="text/css">
  body { background-color:  #FFFFFF; }
  #container { height: 100%; width: 100%; }
  #inner { }
  #gauge_div { margin: 0 auto; }
</style>


<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

  // set your channel id here
  var channel_id = 248987;
  // set your channel's read api key here if necessary
  var api_key = '16UK5LLONGR9LCR2';
  // maximum value for the gauge
  var max_gauge_value = 1023;
  // name of the gauge
  var gauge_name = 'Tlak';

  // global variables
  var chart, charts, data;

  // load the google gauge visualization
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(initChart);

  // display the data
  function displayData(point) {
    data.setValue(0, 0, gauge_name);
    data.setValue(0, 1, point);
    chart.draw(data, options);
  }

  // load the data
  function loadData() {
    // variable for the data point
    var p;

    // get the data from thingspeak
    $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

      // get the data point
      p = data.field1;

      // if there is a data point display it
      if (p) {
        //  p = Math.round((p / max_gauge_value) * 100);
        displayData(p);
      }

    });
  }

  // initialize the chart
  function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);

    chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
   options = {
   width: 160, height: 160, min: 955, max: 1065,
   majorTicks: [950, 980, 1010, 1040, 1060], minorTicks: 10,

   greenFrom: 955,
   greenTo: 1000,
   greenColor: "#00e600",    
   yellowFrom: 1000,
   yellowTo: 1020,
   yellowColor: "#ff751a",
   redFrom: 1020,
   redTo: 1065,
   redColor: "#FF0000"};


    loadData();

    // load new data every 15 seconds
    setInterval('loadData()', 15000);
  }

</script>

Answer 1

首先，建议使用loader.js与较旧的库jsapi

根据release notes ...

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic loader.js。

这只会更改load语句，请参阅以下代码段...

下一步，首先加载数据，然后再构建其他内容

收到json数据后，用它来确定要绘制的图表，
根据{{1}}，field1等指定的属性...

请参阅以下工作代码段...

＆＃13;

field2

＆＃13;

// load the google gauge visualization
google.charts.load('current', {
  callback: loadData,
  packages:['gauge']
});

function loadData() {
  // set your channel id here
  var channel_id = 248987;
  // set your channel's read api key here if necessary
  var api_key = '16UK5LLONGR9LCR2';
  // variable for the data point
  var p;
  // name of the gauge
  var gauge_name;

  // get the data from thingspeak
  $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(jsonData) {
    for (var key in jsonData) {
      if (jsonData.hasOwnProperty(key)) {
        if (key.indexOf('field') > -1) {
          p = jsonData[key];

          switch (key) {
            case 'field1':
              gauge_name = 'Tlak';
              break;

            case 'field2':
              gauge_name = 'Vlhkost';
              break;

            default:
              gauge_name = key;

          }

          displayData(key, p, gauge_name);
        }
      }
    }
  });

  setInterval(loadData, 15000);
}

// display the data
function displayData(div, point, name) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(1);
  data.setValue(0, 0, name);
  data.setValue(0, 1, point);

  var chartContainer = document.getElementById('gauge_div_' + div) || null;
  if (chartContainer === null) {
    chartContainer = document.getElementById('inner').appendChild(document.createElement('div'));
    chartContainer.id = 'gauge_div_' + div;
    chartContainer.className = 'gauge';
  }

  var chart = new google.visualization.Gauge(chartContainer);
  var options = {
    width: 160, height: 160, min: 955, max: 1065,
    majorTicks: [950, 980, 1010, 1040, 1060], minorTicks: 10,
    greenFrom: 955,
    greenTo: 1000,
    greenColor: "#00e600",
    yellowFrom: 1000,
    yellowTo: 1020,
    yellowColor: "#ff751a",
    redFrom: 1020,
    redTo: 1065,
    redColor: "#FF0000"
  };
  chart.draw(data, options);
}

＆＃13;

body { background-color:  #FFFFFF; }
#container { height: 100%; width: 100%; }
#inner { }
.gauge { margin: 0 auto; }

＆＃13;

注意：动态添加图表容器div ...

仪表图表 - 多个仪表java

1 个答案: