多轴图形highcharts.js服务器上传/下载线图，在x轴上带有条，用于服务器上/下

Question

我很难制作出与此完全相同的图表。我搜索了很多，发现高图表可以做到。我要在y轴上显示上传和下载速度，在x轴上显示条形图，当服务器启动时显示绿色，当服务器关闭时显示红色。下面是日期，它也在x轴上。我无法做到。我已经制作了服务器启动/停机时间和上传/下载速度的条形图。 我只是想要一种方法来合并它们，以便在一个图中完全按照它显示它们 image。 我已经为上传下载图编写了代码

$(function () {
$('#container').highcharts({

    chart: {
        type: 'line'
    },

     plotOptions: {
        series: {
          marker: {
                enabled: false
            },
            lineWidth: 2 

            },

        },

        series: [{

        color: '#FCBC15'
    },
                 {

        color: '#002453'
    }
                ],

    title: {
        text: 'Average User Connection Speed'
    },

    data: {
         csv: document.getElementById('csv').innerHTML
    }
});

}）;

现在，下面是服务器启动停机时间的代码

$(function () {
    $('#container').highcharts({
       chart: {
                type: 'column'
            },
            title: {
                text: 'Title',
                style: { fontSize: '17px', color: 'Black', fontWeight: 'bold', fontfamily: 'Times New Roman' }
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [
                'May 1',
                'May 2',
                'May 3',
                'May 4'
            ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Attributes Scores'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0,
                    borderWidth: 0,
                    minPointLength: 0
                }
            },
        series: [{
                name: ' ',
                color: "",
                data: [1, 0, 1, 1]


                // data: eval('(' + seriesYTD + ')')


            }
                ],

  exporting: {
                enabled: false
            }
        }, function (chart) {



            $.each(chart.series[0].data, function (i, data) {

                if (data.y < 1){
                    data.y=data.y+1;
                    data.update({
                        color: '#FF0000'
                    });
                }
                else
                    data.update({
                        color: '#00B14A'
                    });



            });



        });

}）;