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