Highchart: Не удалось заполнить данные от JSON

Question

Я пытался изучить highchart, но когда я пытаюсь заполнить данные из JSON, он не работает нормально. Но я жестко кодирую данные, которые он отлично работает. Итак, я думаю, что я ошибаюсь, звони в JSON.

Моя JSON выглядит следующим образом: -

[{ 
"data": ["11-Aug 12:03", "11-Aug 12:45", "11-Aug 13:13", "11-Aug 13:53", "11-Aug 14:03", "11-Aug 14:33", "11-Aug 14:54", "11-Aug 15:17", "11-Aug 15:49", "11-Aug 16:07", "11-Aug 17:00", "11-Aug 17:33"] 
}, { 
"data": [23987, 24784, 25899, 255, 25897, 25668, 24114, 23899, 224987, 25111, 25899, 23] 
}, { 
"data": [12.4, 4.56, 3.8, 1.2, 11, 12.3, 5.67, 7.65, 34.5, 12.78, 10.5, 2.8] 
}] 

Добавление весь код -

$(function() { 
$('#container').highcharts({ 
    chart: { 
     zoomType: 'xy' 
    }, 
    title: { 
     text: 'Job Status' 
    }, 

    xAxis: [{ 
     categories: [], 
     crosshair: true 
    }], 
    yAxis: [{ // Primary yAxis 
     labels: { 

      style: { 
       color: Highcharts.getOptions().colors[2] 
      } 
     }, 
     title: { 
      text: 'Transaction Count', 
      style: { 
       color: Highcharts.getOptions().colors[2] 
      } 
     }, 
     opposite: true 

    }, { // Secondary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Time', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     labels: { 
      format: '{value} min', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     } 

    }, { // Tertiary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Sea-Level Pressure', 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     labels: { 

      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     opposite: true 
    }], 
    tooltip: { 
     shared: true 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'left', 
     x: 80, 
     verticalAlign: 'top', 
     y: 55, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
    }, 
    series: [{ 
     name: 'Rainfall', 
     type: 'column', 
     yAxis: 1, 
     data: [] 

    }, { 
     name: 'Temperature', 
     type: 'spline', 
     data: [] 

    }] 

    $.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function(json) { 
     options.xAxis.categories = json[0]['data']; 
     options.series[0] = json[1]; 
     options.series[1] = json[2]; 
     chart = new Highcharts.Chart(options); 
    }); 
}); 
}); 

Я не смог создать JSFiddle, чтобы показать живой пример.

Не могли бы вы помочь в том, где я ошибаюсь при вызове данных из JSON.

С уважением

Answer 1

Синтаксис неверен. Более того, вы запускаете высокочастотные диаграммы два раза. Фиксированный код:

$(function() { 
var options = { 
    chart: { 
     zoomType: 'xy', 
     renderTo: 'container' 
    }, 
    title: { 
     text: 'Job Status' 
    }, 

    xAxis: [{ 
     categories: [], 
     crosshair: true 
    }], 
    yAxis: [{ // Primary yAxis 
     labels: { 

      style: { 
       color: Highcharts.getOptions().colors[2] 
      } 
     }, 
     title: { 
      text: 'Transaction Count', 
      style: { 
       color: Highcharts.getOptions().colors[2] 
      } 
     }, 
     opposite: true 

    }, { // Secondary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Time', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     labels: { 
      format: '{value} min', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     } 

    }, { // Tertiary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Sea-Level Pressure', 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     labels: { 

      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     opposite: true 
    }], 
    tooltip: { 
     shared: true 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'left', 
     x: 80, 
     verticalAlign: 'top', 
     y: 55, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
    }, 
    series: [{ 
     name: 'Rainfall', 
     type: 'column', 
     yAxis: 1, 
     data: [] 

    }, { 
     name: 'Temperature', 
     type: 'spline', 
     data: [] 

    }] 
}; 



    $.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function (json) { 
     options.xAxis[0].categories = json[0]['data']; 
     options.series[0] = json[1]; 
     options.series[1] = json[2]; 
     chart = new Highcharts.Chart(options); 
    }); 
});