在 highchart 中绘制 JSON 结果答案

【问题标题】：Draw JSON result in highchart在 highchart 中绘制 JSON 结果
【发布时间】：2018-11-02 15:29:43
【问题描述】：

我将此代码用于 highchart 和 JSON 处理：

var json;
var quantity = [];
var nm = [];
$(document).ready(function () {
  $.ajax({
    url: "../Broken/index.php",
    dataType: "text",
    success: function (data) {
      json = $.parseJSON(data);
      console.log(json);


      for (var i = 0; i < json.length; i++) {
        var obj = json[i];
        for (var prop in obj) {
          if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {
            obj[prop] = +obj[prop];
          }
        }
      }

      console.log(JSON.stringify(json, null, 2));

      console.log(json);

      for (var j in json) {
        quantity.push(json[j].OC)
      }

      console.log(quantity);

    },
  });

});


var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 50,
      viewDistance: 25
    }
  },
  title: {
    text: 'Broken OC weekly trend'
  },
  plotOptions: {
    column: {
      depth: 25
    }
  },
  series: [{
    data: quantity
  }]
});

<!DOCTYPE html>
<html>
  <head>
    <title>Broken OC graph</title>
    <script src="../Broken/jquery.min.js"></script>
    <script src="../Broken/highcharts.js"></script>
    <script src="../Broken/highcharts-3d.js"></script>
  </head>
  <body>
    <br /><br />
    <div style="width:900px;">
      <div id="container" style="width: 900px; height: 500px;"></div>
    </div>
  </body>
</html>

这是 index.php JSON 结果：

[
  {"wk": "W30", "OC": "7"}, 
  {"wk": "W31", "OC": "4"}, 
  {"wk": "W32", "OC": "2"},
  {"wk": "W33", "OC": "4"},
  {"wk": "W34", "OC": "2"},
  {"wk": "W35", "OC": "4"},
  {"wk": "W36", "OC": "2"}
]

我的问题是：如何用 higchart 绘制变量quantity？！如果我将该变量插入Data: 字段，则不会发生任何事情。

感谢您的帮助！

【问题讨论】：

尝试像这样OC转换quantity.push( parseInt(json[j].OC) )
感谢您的评论，但不幸的是它没有帮助。我的数组已经包含数字（不是字符串），所以转换并没有改变结果（在 highchart 中没有任何显示）。最好的问候

标签： javascript json highcharts

【解决方案1】：

$.ajax 是异步的：http://api.jquery.com/jquery.ajax/，因此您创建一个包含空数据数组的图表。您应该在数据准备好时创建图表：

function getData() {
    var json = [
  {"wk": "W30", "OC": "7"}, 
  {"wk": "W31", "OC": "4"}, 
  {"wk": "W32", "OC": "2"},
  {"wk": "W33", "OC": "4"},
  {"wk": "W34", "OC": "2"},
  {"wk": "W35", "OC": "4"},
  {"wk": "W36", "OC": "2"}
]

    var quantity = [];

    for (var i = 0; i < json.length; i++) {
        var obj = json[i];
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {
                obj[prop] = +obj[prop];
            }
        }
    }


    for (var j in json) {
        quantity.push(json[j].OC)
    }

    createChart(quantity);
}

function createChart(quantity) {
    Highcharts.chart('container', {
        series: [{
            data: quantity
        }]
    });
}

getData();

现场演示：http://jsfiddle.net/BlackLabel/b1jecy4t/

【讨论】：