Question

我有以下代码，效果很好。您可以看到的var数据是硬编码的。

public

我需要通过.getJSON（或.ajax）来提取JSON，而不是硬编码。我尝试了以下内容并且它没有工作（也就是说图表标签显示但数据没有显示）。有人能指出我如何加载这个JSON的正确方向吗？

$(function() {
  var data = [{
    "day": "06/19/2016",
    "region": "Ohio",
    "daily_er": "98.61"
  }, {
    "day": "06/19/2016",
    "region": "Western NE",
    "daily_er": "98.63"
  }, {
    "day": "07/19/2016",
    "region": "Ohio",
    "daily_er": "68.61"
  }, {
    "day": "07/19/2016",
    "region": "Western NE",
    "daily_er": "32.63"
  }, {
    "day": "08/19/2016",
    "region": "Ohio",
    "daily_er": "98.61"
  }, {
    "day": "08/19/2016",
    "region": "Western NE",
    "daily_er": "48.63"
  }]

  var exist, index, options = {
    xAxis: {
      categories: []
    },
    series: []
  }
  Highcharts.each(data, function(p, i) {
    exist = false;
    if (options.xAxis.categories.indexOf(p.day) < 0) {
      options.xAxis.categories.push(p.day)
    }
    Highcharts.each(options.series, function(s, j) {
      if (s.name === p.region) {
        exist = true;
        index = j;
      }
    });
    if (exist) {
      options.series[index].data.push(parseFloat(p.daily_er))
    } else {
      options.series.push({
        name: p.region,
        data: [parseFloat(p.daily_er)]
      })
    }
  })
  $('#container').highcharts(options);
});

注意：很多人都感谢！我选择了一个答案，但你所有的答案都很有见地。你们都给我带来了很多麻烦...... JW

Answer 1

getJSON是以下的快捷方式：

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

使用json的代码可能在实际获取json之前执行，因为ajax异步工作，这意味着$ .getJSON下面的行在调用结束之前执行。你想用$ .getJSOn调用的结果做的任何事都应该在$ .getJSON的回调中完成，如下所示：

$.getJSON( "data.json", function( response) { //be sure that data.json is a valid url
      var exist, index, options = {
                                      xAxis: {
                                              categories: []
                                            },
                                     series: []
                                 }
      .....
      .....
      .....
});

您可以查看此页面以获取$ .getJSON的详细说明： http://api.jquery.com/jquery.getjson/

如果这有用，请将答案标记为正确。

Answer 2

您是否尝试过使用JSON.stringify或JSON.parse方法。使用你的代码，你会做这样的事情： JSON.stringify（数据）;它会将您的JSON转换为字符串，并解析它 JSON.parse（数据）;

也许这也会： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Answer 3

$.getJSON()是异步的，因此您需要将逻辑放在回调中。目前，您正在尝试使用data之前的值。

$.getJSON("data.json", function(json){
  var data = json;

  var exist, index, options = {
    xAxis: {
      categories: []
    },
    series: []
    }

    ...
})

通过getJSON将JSON加载到变量中

3 个答案: