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); 
     });