Загрузка файла пользовательского JSon - highcharts.js

Question

У меня есть проблема с загрузкой файла .json:

[ 
    [ 
     [ 
      "2014-11-19 06:00:00", 
      "1.1" 
     ], 
     [ 
      "2014-11-19 14:00:00", 
      "4.9" 
     ], 
     [ 
      "2014-11-19 15:00:00", 
      "4.9" 
     ], 
     [ 
      "2014-11-19 16:00:00", 
      "4.9" 
     ], 
     [ 
      "2014-11-19 17:00:00", 
      "4.9" 
     ], 
     [ 
      "2014-11-19 18:00:00", 
      "4.9" 
     ] 
    ], 
    [ 
     [ 
      "2014-11-13 23:00:00", 
      "194" 
     ], 
     [ 
      "2014-11-14 00:00:00", 
      "195" 
     ], 
     [ 
      "2014-11-14 01:00:00", 
      "187" 
     ], 
     [ 
      "2014-11-14 02:00:00", 
      "191" 
     ], 
     [ 
      "2014-11-14 03:00:00", 
      "218" 
     ], 
     [ 
      "2014-11-14 04:00:00", 
      "170" 
     ] 
    ] 
] 

значения:

[[data, valueTemperature],[data,WindMax]] 

Я пытался таким образом, но не работает:

$(document).ready(function() { 
var options = { 
    chart: { 
     renderTo: 'container', 
     type: 'spline', 
     zoomType: 'xy' 
    }, 

    title: { 
     text: 'Temperatura' 
    }, 

    subtitle: { 
     text: '5 dni' 
    }, 

    xAxis: { 
     type: 'datetime', 

    }, 


    yAxis: [{ // Primary yAxis 
     labels: { 
      format: '{value}°C', 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     title: { 
      text: 'Temperature', 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 

     min: -25, 
     max: 25, 
    }, { // Secondary yAxis 
     title: { 
      text: 'Prędkość wiatru', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     labels: { 
      format: '{value} m/s', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     min: 0, 
     max: 15, 
     opposite: true 
    }], 

    tooltip: { 
     shared: true 
    }, 

    series: [{}] 
}; 

var chart; 

$.getJSON('test.json', function (data) { 
    options.series[0].data = data; 
    chart = new Highcharts.Chart(options); 


}); 

}); 

Как правильно записать его для типа данных?

Answer 1

Есть несколько вопросов:

1. Вы сохранили числовые данные в виде строк. При попытке найти решение мне пришлось снять " с значениями температуры и скорости ветра, или я получу Highcharts Error #14
2. У вас есть две серии данных, но вы создаете только один объект в options.series. Вы должны создавать два объекта серии и добавлять их в массив options.series.
3. Для второй серии вы должны указать, какую ось y использовать. В этом случае yAxis == 1.
4. Максимальное значение для вашей второй оси y слишком мало для отображения данных.

Вот пример для демонстрации выше: http://jsfiddle.net/6yvdkp20/1/

$(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline', 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Temperatura' 
     }, 
     subtitle: { 
      text: '5 dni' 
     }, 
     xAxis: { 
      type: 'datetime', 
     }, 
     yAxis: [ 
      { // Primary yAxis 
       labels: { 
        format: '{value}°C', 
        style: { 
         color: Highcharts.getOptions().colors[1] 
        } 
       }, 
       title: { 
        text: 'Temperature', 
        style: { 
         color: Highcharts.getOptions().colors[1] 
        } 
       }, 

       min: -25, 
       max: 25, 
      }, { // Secondary yAxis 
       title: { 
        text: 'Prędkość wiatru', 
        style: { 
         color: Highcharts.getOptions().colors[0] 
        } 
       }, 
       labels: { 
        format: '{value} m/s', 
        style: { 
         color: Highcharts.getOptions().colors[0] 
        } 
       }, 
       min: 0, 
       max: 200, 
       opposite: true 
      } 
     ], 
     tooltip: { 
      shared: true 
     }, 
     series: [ 
      { 
       data: [ 
        [ 
         "2014-11-19 06:00:00", 
         1.1 
        ], 
        [ 
         "2014-11-19 14:00:00", 
         4.9 
        ], 
        [ 
         "2014-11-19 15:00:00", 
         4.9 
        ], 
        [ 
         "2014-11-19 16:00:00", 
         4.9 
        ], 
        [ 
         "2014-11-19 17:00:00", 
         4.9 
        ], 
        [ 
         "2014-11-19 18:00:00", 
         4.9 
        ] 
       ] 
      },{ 
       yAxis: 1, // This means the second yAxis will be used to plot this series 
       data:[ 
        [ 
         "2014-11-13 23:00:00", 
         194 
        ], 
        [ 
         "2014-11-14 00:00:00", 
         195 
        ], 
        [ 
         "2014-11-14 01:00:00", 
         187 
        ], 
        [ 
         "2014-11-14 02:00:00", 
         191 
        ], 
        [ 
         "2014-11-14 03:00:00", 
         218 
        ], 
        [ 
         "2014-11-14 04:00:00", 
         170 
        ] 
       ] 
      } 
     ] 
    }; 

    $('#container').highcharts(options); 
}); 

Поскольку вы упомянули в комментариях, что вы не можете изменить формат данных, которые вы кокетливыми, вам нужно будет скорректировать формат после получения данные. Следующая функция должна правильно сделать (хотя я не гарантирую):

function fixFormat(data) { 
    for(var i = 0; i < dataSeries[0].length; ++i) { 
     dataSeries[0][i][1] = parseFloat(dataSeries[0][i][1]); 
    } 

    for(var i = 0; i < dataSeries[1].length; ++i) { 
     dataSeries[1][i][1] = parseInt(dataSeries[1][i][1]); 
    } 
} 

Использование:

$.getJSON('http://kamery.topr.pl/meteo/charts/moko.php', function (data) { 
    // Correct the formatting 
    fixFormat(data); 

    // Put the data in the right place 
    options.series[0].data = data[0]; 
    options.series[1].data = data[1]; 
});