加載自定義的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]; 
});