个人中心
gpt4 book ai didi

javascript - 仪表图表 - 多个仪表 java

转载 作者：行者123 更新时间：2023-11-28 04:44:29 26 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

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

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

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

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

收到 json 数据后，用它来确定要绘制哪些图表，
根据 field1、field2 等指定的属性...

请参阅以下工作片段...

// 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);
}
body { background-color:  #FFFFFF; }
#container { height: 100%; width: 100%; }
#inner { }
.gauge { margin: 0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container">
  <div id="inner"></div>
</div>

注意:图表容器 div 是动态添加的...

关于javascript - 仪表图表 - 多个仪表 java，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43502365/

26 4 0
文章推荐： c++ - 如何将像素转换为索引
文章推荐： html - 使用 html 和 css 的粗体圆形和彩色列表元素
文章推荐： c++ - 如何检查数组中的索引是否为空
文章推荐： html - 使背景图片完全适合 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com