javascript - 如何使上面的图表响应窗口大小调整？

Question

这里我附上了我的代码。我想让上图响应窗口大小调整。请尽快给我一个解决方案。

   Highcharts.chart('containerChart', {
        chart: {
            type: 'bar',
            marginLeft: 0,
            marginTop: 100
        },
        title: {
            text: 'Reject Category',
            align: 'left',
            x: 30,
            y: 35,
            style: {
                color: '#666666',
                fontWeight: 'normal',
                fontSize: 12,
                fontFamily: 'Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif',
            }
        },
        tooltip: {
            enabled: false,
            valueSuffix: ' %',

            }
        },
        exporting: {
            enabled: false,
        },
        credits: {
            enabled: false,
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                },

            },
            series: {
                pointWidth: 25,

                }, states: {
                    hover: {
                        enabled: false
                    }
                }
            },

        },
        xAxis: [{
            categories: arrcategory,
            width: 100,
            left: 140,
            height: 34 * ctglength,
            lineWidth: 0,
            minorGridLineWidth: 0,
            minorTickLength: 0,
            // tickLength: 0,
            title: {
                text: null,
            },
            labels: {
                overflow: 'justify',
                enabled: true,
                style: {
                    fontWeight: 'bold',

                }

            },
            gridLineWidth: 0
        }, {
            categories: true,
            linkedTo: 0,
            width: 100,
            height: 34 * ctglength,
            left: 358,
            visible: false
        }],
        yAxis: [{
            min: 0,
            max: 100,
            width: 400,
            left: 140,
            //gridLineWidth: 0,
            labels: {
                overflow: 'justify',
                enabled: false
            },
            title: {
                text: '# of Transactions',
                "textAlign": 'right',
                "rotation": 0,
                x: 15,
                y: -310
            },

        }, {
            min: 0,
            max: 100,
            left: 700,
            width: 400,
            // gridLineWidth: 0,
            labels: {
                overflow: 'justify',
                enabled: false
            },
            title: {
                text: '$ in Premium',
                "textAlign": 'right',
                "rotation": 0,
                x: 10,
                y: -330
            },
        }],
        series: [{
            data: arrdata1,
            color: '#E95E4F',
            showInLegend: false,
            //enableMouseTracking: false,
            dataLabels: {
                overflow: false,
                enabled: true,
                crop: false,



        }, {
            data: arrdata2,
            color: '#E95E4F',
            showInLegend: false,
            //enableMouseTracking: false,
            dataLabels: {
                overflow: false,
                enabled: true,
                crop: false,

            },
            yAxis: 1,
            xAxis: 1
        }]
    });

Answer 1

尝试在 window.onresize 中设置图表的大小，在 var 中设置你的图表并设置高度和宽度以获取输入值

 myChart= Highcharts.chart....your chart config function

window.onresize = function () {
   var w = window.innerWidth;
   var h = window.innerHeight;

   myChart.setSize(w, h);
}

jsfiddle.net/pdy5w1ta/1