无法将 JSON 数据加载到 Google Gauge 中答案

【问题标题】：Can't load JSON data into Google Gauge无法将 JSON 数据加载到 Google Gauge 中
【发布时间】：2016-09-09 11:24:38
【问题描述】：

尝试从内部 HTML 页面输入 JSON 数据时遇到问题。由于我不需要可视化表格，因此我正在努力确定数据是否正确存储在其中。

这是我的 ajax；

<script type="text/javascript">
        google.charts.load('current', {'packages':['gauge']});
        google.charts.setOnLoadCallback(drawChart);

        $(document).ready(function(){
            $('tempData').DataTable({
                ajax: {
                    url: 'https://10.54.101.43/getData.json',
                    dataSrc: 'sensor',
                },
                columns: [
                    {data: 'label'},
                    {data: 'tempf'},
                    {data: 'tempc'}
                ]
            });

        });

这是图表的绘制：

function drawChart (){
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            data.addRows(1);
            data.setValue(0, 0, 'Temp');
            data.setValue(0, 1, 76);


            var options = {
                width: 400, height: 120,
                redFrom: 69, redTo: 100,
                yellowFrom: 31, yellowTo: 69,
                greenFrom: 0, greenTo: 31,
                minorTicks: 5
            };

            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

            chart.draw(data, options);

            setInterval(function() {
                data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
                chart.draw(data, options);
            }, 13000);
        }
</script>

我要做的是从该 URL 获取数据，仅将相关信息存储在数组中，然后使用所需数据填充仪表。

编辑这是未格式化的 JSON。

{"name":"CAB-L1","date":"09/12/16 15:54:36","uptime":"21d 04:18:08","scale":1,"macaddr":"00:80:A3:A4:9B:2F","serial":"RA3E-A49B2F","devtype":85,"refresh":"60","disp":0,"interval":"300","gtmd_interval":"3600","version":"v2.0.1","port":80,"ip":"10.54.101.43","gtmd_disabled":"0","time_config":{"timezone": "0","format": "0", "display": "0", "daylight_saving_en": "0"},"sensor":[{"label":"Internal Sensor","tempf":"81.82","tempc":"27.68","highf":"94.31","highc":"34.62","lowf":"79.91","lowc":"26.62","alarm":4,"type":16,"enabled":1},{"label":"Ext Sensor 1","tempf":"32.00","tempc":"0.00","highf":"32.00","highc":"0.00","lowf":"32.00","lowc":"0.00","alarm":0,"type":0,"enabled":0}],"switch_sen":[{"label":"Switch Sen 1","enabled":1,"alarm":1,"status":0}]}

【问题讨论】：

标签： javascript json ajax google-visualization

【解决方案1】：

如果不需要ajax数据表，建议这样设置

google.charts.load('current', {
  callback: function () {

    $.ajax({
      url: "https://10.54.101.43/getData.json",
      dataType:"json"
    }).done(function (jsonData) {

      // print json to console
      console.log(JSON.stringify(jsonData));

      // get json here 
      // use to build data table (if formatted for google)
      var data = new google.visualization.DataTable(jsonData);

      var options = {
        width: 400, height: 120,
        redFrom: 69, redTo: 100,
        yellowFrom: 31, yellowTo: 69,
        greenFrom: 0, greenTo: 31,
        minorTicks: 5
      };

      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);

      setInterval(function() {
        data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
        chart.draw(data, options);
      }, 13000);

    }).fail(function (jqXHR, textStatus) {
      console.log('error', textStatus);
    });

  },
  packages:['corechart']
});

如果你的json格式如下，可以直接创建图表数据
（在DataTable constructor method 下的示例中找到）

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
});

编辑

由于传感器数据没有为谷歌格式化，
数据必须从json中提取

给定以下 json...

{
  "name":"CAB-L1",
  "date":"09/12/16 07:56:59",
  "uptime":"20d 20:21:56",
  "scale":1,
  "macaddr":"00:80:A3:A4:9B:2F",
  "serial":"RA3E-A49B2F",
  "devtype":85,
  "refresh":"60",
  "disp":0,
  "interval":"300",
  "gtmd_interval":"3600",
  "version":"v2.0.1",
  "port":80,
  "ip":"10.54.101.43",
  "gtmd_disabled":"0",
  "time_config":{
    "timezone": "0",
    "format": "0",
    "display": "0",
    "daylight_saving_en": "0"
  },
  "sensor":[
    {
      "label":"Internal Sensor",
      "tempf":"80.92",
      "tempc":"27.18",
      "highf":"94.31",
      "highc":"34.62",
      "lowf":"79.91",
      "lowc":"26.62",
      "alarm":4,
      "type":16,
      "enabled":1
    },
    {
      "label":"Ext Sensor 1",
      "tempf":"32.00",
      "tempc":"0.00",
      "highf":"32.00",
      "highc":"0.00",
      "lowf":"32.00",
      "lowc":"0.00",
      "alarm":0,
      "type":0,
      "enabled":0
    }
  ],
  "switch_sen":[
    {
      "label":"Switch Sen 1",
      "enabled":1,
      "alarm":1,
      "status":0
    }
  ]
}

下面的示例将使用标记为"sensor" 的数组来构建图表

google.charts.load('current', {
  callback: function () {

    $.ajax({
      url: "https://10.54.101.43/getData.json",
      dataType:"json"
    }).done(function (jsonData) {

      // create data table
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Sensor');
      data.addColumn('number', 'Reading');

      // get sensor data
      jsonData.sensor.forEach(function (sensor) {
        data.addRow([
          // use sensor label
          sensor.label,
          // convert 'tempf' value to a number
          parseFloat(sensor.tempf)
        ]);
      });

      var options = {
        width: 600, height: 180,
        redFrom: 69, redTo: 100,
        yellowFrom: 31, yellowTo: 69,
        greenFrom: 0, greenTo: 31,
        minorTicks: 5
      };

      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);

    }).fail(function (jqXHR, textStatus) {
      console.log(textStatus);
    });

  },
  packages:['gauge']
});

出于示例目的，以下是一个工作 sn-p，使用硬编码的 json

google.charts.load('current', {
  callback: function () {

    var jsonData = {
      "name":"CAB-L1",
      "date":"09/12/16 07:56:59",
      "uptime":"20d 20:21:56",
      "scale":1,
      "macaddr":"00:80:A3:A4:9B:2F",
      "serial":"RA3E-A49B2F",
      "devtype":85,
      "refresh":"60",
      "disp":0,
      "interval":"300",
      "gtmd_interval":"3600",
      "version":"v2.0.1",
      "port":80,
      "ip":"10.54.101.43",
      "gtmd_disabled":"0",
      "time_config":{
        "timezone": "0",
        "format": "0",
        "display": "0",
        "daylight_saving_en": "0"
      },
      "sensor":[
        {
          "label":"Internal Sensor",
          "tempf":"80.92",
          "tempc":"27.18",
          "highf":"94.31",
          "highc":"34.62",
          "lowf":"79.91",
          "lowc":"26.62",
          "alarm":4,
          "type":16,
          "enabled":1
        },
        {
          "label":"Ext Sensor 1",
          "tempf":"32.00",
          "tempc":"0.00",
          "highf":"32.00",
          "highc":"0.00",
          "lowf":"32.00",
          "lowc":"0.00",
          "alarm":0,
          "type":0,
          "enabled":0
        }
      ],
      "switch_sen":[
        {
          "label":"Switch Sen 1",
          "enabled":1,
          "alarm":1,
          "status":0
        }
      ]
    };

    // create data table
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sensor');
    data.addColumn('number', 'Reading');

    // get sensor data
    jsonData.sensor.forEach(function (sensor) {
      data.addRow([
        // use sensor label
        sensor.label,
        // convert 'tempf' value to a number
        parseFloat(sensor.tempf)
      ]);
    });

    var options = {
      width: 600, height: 180,
      redFrom: 69, redTo: 100,
      yellowFrom: 31, yellowTo: 69,
      greenFrom: 0, greenTo: 31,
      minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);

  },
  packages:['gauge']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

希望这会有所帮助，我不确定我是否遵循了这个问题——另外，如果您有兴趣在启动时添加动画，here is an example
抱歉，这篇文章的措辞相当糟糕。我们有一个托管网络温度传感器的 Web 服务器，并通过访问“10.54.101.43/getData.json”打开一个只显示原始 JSON 数据的网页。由此，我需要获取数据并将其存储在某个地方，以便我可以使用传感器的当前温度更新谷歌仪表。 -- 感谢您对原始帖子的回复，之后它变得更有意义了。
你提到在空白网页上看到的json，将在.done函数中返回到上面的代码中。我在// print json to console 中添加了一个新行——如果你打开浏览器控制台，通常是 F12，你应该会看到相同的数据——如果你可以在问题中发布一个 json 样本，那么我可以展示如何为谷歌图表操作它......
一条评论太长了； {"name":"CAB-L1","date":"09/12/16 07:56:59","uptime":"20d 20:21:56","scale":1,"macaddr" :"00:80:A3:A4:9B:2F","serial":"RA3E-A49B2F","devtype":85,"refresh":"60","disp":0,"interval":" 300","gtmd_interval":"3600","version":"v2.0.1","port":80,"ip":"10.54.101.43","gtmd_disabled":"0","time_config":{ “时区”：“0”，“格式”：“0”，“显示”：“0”，“daylight_saving_en”：“0”}，“传感器”：[{“标签”：“内部传感器”，“tempf ":"80.92","tempc":"27.18","highf":"94.31","highc":"34.62","lowf":"79.91","lowc":"26.62","alarm": 4,"type":16,"enabled":1},
感谢分享，用 json 编辑问题可能更有意义——无论如何，请参阅上面的 EDIT 使用提供的示例数据...