highcharts 堆积图

参考 

多坐标轴混合图 | JShare

使用 js资源

https://cdn.highcharts.com.cn/10.2.1/highcharts.js

https://cdn.highcharts.com.cn/10.2.1/modules/exporting.js

https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js

 效果

 js 引用

html

 js

x是x轴数据[2022-01-01 07:00:00，X,X,X)] 

series 是y轴数组[

[10,9,91,7.8],

[10,9,91,7.8]

]

function char(x,series) {
    var chart = Highcharts.chart('container', {
        chart: {
            zoomType: 'xyy'
        },
        title: {
            text: '铁水分包重量曲线'
        },
        subtitle: {
            text: ''
        },
        xAxis: [{
            categories: x,
            //     '1:00','2:00','3:00','4:00','5:00','6:00','7:00', '8:00', '9:00', '10:00', '11:00', '12:00','13:00', '14:00', '15:00', '16:00',
            crosshair: true
        }],
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        yAxis: [ { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: '实际出铁吨位',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} 吨',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            x: 76,
            verticalAlign: 'top',
            y: 16,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: series
    });

}