Нарисуйте результат JSON в highchart

Я использую этот код для обработки 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.info(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.info(JSON.stringify(json, null, 2));

      console.info(json);

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

      console.info(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>

Это результат JSON index.php:

[
  {"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"}
]

У меня вопрос: Как нарисовать переменную quantity с помощью Higchart ?! Если я вставлю эту переменную в поле Data:, ничего не произойдет.

Спасибо за помощь!

Попробуй сконвертировать OC вот так quantity.push( parseInt(json[j].OC) )

— 02.11.2018 16:34

Спасибо за ваш комментарий, но, к сожалению, это не помогает. Мой массив уже содержит числа (не строку), поэтому доза преобразования не изменила результат (нет отображения в highchart). С наилучшими пожеланиями

— 02.11.2018 20:28

javascript json highcharts

02.11.2018 16:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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/

05.11.2018 16:46