从JSON获得JavaScript的价值

时间:2016-12-06 01:32:48

标签: javascript json charts

我从JSON文件中提取数据,然后我有一个绘制图形的JavaScript文件。

这是JSON文件:

enter image description here

这是我绘制图表的JavaScript代码:

$(document).ready(function(){
  google.charts.load('current', {'packages': ['corechart']});
  //alert('aa00'~
  $('.error').hide();
  $(".buttonSala").click(function() {
    // validate and process form here
    $('.error').hide();
    var canal = $("#canalSala option:selected").val();
    var datai = $("#datainisala").val(); 
    var dataf = $("#datafimsala").val(); 

    //alert(canal);
    // Send the data using post
    var posting = $.post( "getSala.php", { canal: canal, dataini: datai, datafim: dataf } );

    // Put the results in a div
    posting.done(
      function(data) {
        // Set a callback to run when the Google Visualization API is loaded.

        var jsonData = JSON.parse(data).channels[canal].values;
        google.charts.setOnLoadCallback(function() {
          var dataArray = [["ts", 'values']];

          for (var i = 0; i < jsonData.length; i++) {
            var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))];
            dataArray.push(tempArray);
          }

          // Create our data table out of JSON data loaded from server.
          var data = google.visualization.arrayToDataTable(
            dataArray
          );

          var options = {
            hAxis: {title: "Data/Hora", titleTextStyle: {color: "#333"}},
            vAxis: {title: "Temperatura", titleTextStyle: {color: "#333"}}
          };

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.AreaChart(document.getElementById('chart_divsala'));
          chart.draw(data, options);
        });
      });
    return false;
  });
});

正如您所看到的那样,图表是正确的:

enter image description here

在这部分:

var dataArray = [['ts', 'values']];

它使用ts数据绘制,“值”是图形,左侧和线条描述中显示的内容。如何访问JSON proprety“chname”以使用该信息填充图形描述?在这种情况下,“oxigénio(%)没有内部做pipo de madeira 4”。

我已经尝试了一切,但我无法让它发挥作用......

2 个答案:

答案 0 :(得分:0)

当您使用带有dataType json的ajax时。数据返回对象。在我的情况下,我添加成功以在请求成功时获取数据。例如:

$.ajax({
  url: "getData.php",
  type: 'GET',
  dataType : "json",
  success: function (data) {
    data.forEach(function(object){
      //your code logic here

    });
  }
});

答案 1 :(得分:0)

您可以使用chname访问json属性response.channels[canal].info.chname,其中obj是来自json文件的整个对象

所以,替换这些行:

var jsonData = JSON.parse(data).channels[canal].values;
google.charts.setOnLoadCallback(function() {
    var dataArray = [["ts", 'values']];

用这个:

var response = JSON.parse(data);
var jsonData = response.channels[canal].values;
var desciption = response.channels[canal].info.chname;
google.charts.setOnLoadCallback(function() {
    dataArray = [["ts", desciption ]];