高圖不同的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);

這是用於獲取JSON數據以呈現圖表的JavaScript代碼段。

$(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

您可以應用相反的方法： xAxis中類別的布爾值 ，並將后端數據作為

小提琴演示

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