Highcharts不同的x軸的值

Question

我創建一個學生的進步圖表這需要從數據庫並輸出爲線圖不同受試者的測試結果。我已將x軸設置爲測試日期，將y軸設置爲測試百分比。問題是我只能顯示一個主題的日期。 例如，我有一張來自計算機和英語測試結果的圖表。這些測試發生在不同的日期，我不知道如何正確顯示它們。 這裏是我的PHP代碼，我查詢數據庫並將結果轉換爲JSON格式。

$query = "SELECT date, (achieved/total) * 100 AS Marks FROM res_com 
ORDER BY date"; 

$result = mysqli_query($db_connection, $query); 

$date_com['name'] = 'Date'; 
$marks_com['name'] = 'Computer'; 
while ($r1 = mysqli_fetch_array($result)) { 
$date_com['data'][] = $r1['date']; 
$marks_com['data'][] = $r1['Marks']; 
} 

$query = "SELECT date, (achieved/total) * 100 AS Marks FROM res_isl 
ORDER BY date"; 

$result = mysqli_query($db_connection, $query); 

$date_eng['name'] = 'Date'; 
$marks_eng['name'] = 'English'; 
while ($r2 = mysqli_fetch_array($result)) { 
$date_eng['data'][] = $r2['date']; 
$marks_eng['data'][] = $r2['Marks']; 
} 

$rslt = array(); 
array_push($rslt, $date_com); 
array_push($rslt, $marks_com); 
array_push($rslt, $date_eng); 
array_push($rslt, $marks_eng); 
print json_encode($rslt, JSON_NUMERIC_CHECK); 

這裏是JavaScript代碼片段，用於獲取JSON數據來呈現圖表。

$(document).ready(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline' 
     }, 
     title: { 
      text: 'That High School', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Test Results', 
      x: -20 
     }, 
     xAxis: { 
      categories: [], 
      title: { 
       text: 'Date' 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Marks' 
      }, 
      plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
     }, 
     tooltip: { 
      valueSuffix: '%' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [] 
    }; 
    $.getJSON("data/data-basic-colm.php", function(json) { 
     options.xAxis.categories = json[0]['data']; 
     //xAxis: {categories: []} 
     options.series[0] = json[1]; 
     options.series[1] = json[3]; 
     chart = new Highcharts.Chart(options); 
    }); 
}); 

這裏是輸出：

https://i.stack.imgur.com/GCfE9.jpg

的問題是我無法從兩個主題代表日期，我只能顯示來自計算機的測試日期與此：

options.xAxis.categories = json[0]['data']; 

或者從英語測試與此：

options.xAxis.categories = json[2]['data']; 

我怎麼能顯示來自兩個日期？

Answer 1

您可以在X軸申請opposite: Boolean的類別，有你的後端數據

Fiddle demo

options.xAxis = [{ 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, { 
    opposite: true, 
    categories: ['Jan1', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}]; 
options.series[0] = { 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
}; 
options.series[1] = { 
    xAxis: 1, 
    data: [39.9, 61.5, 56.4, 5.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
}; 
chart = new Highcharts.Chart(options); 

所以最後這將是

$.getJSON("data/data-basic-colm.php", function(json) { 
      options.xAxis = //json['processed_categories_as_above'] through back end; 

      options.series[0] = //json['processed_series_data_as_above'] through back end; 
      options.series[1] = //json['processed_series_data_as_above'] through back end; 
      chart = new Highcharts.Chart(options); 
     });