Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/389.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在调整窗口大小时使上面的highchart图形响应?_Javascript_Highcharts - Fatal编程技术网

Javascript 如何在调整窗口大小时使上面的highchart图形响应?

Javascript 如何在调整窗口大小时使上面的highchart图形响应?,javascript,highcharts,Javascript,Highcharts,这里我附上了我的代码。我想让上面的图形在调整窗口大小时响应。请尽早给我一个解决方案 Highcharts.chart('containerChart', { chart: { type: 'bar', marginLeft: 0, marginTop: 100 }, title: { text: 'Reject Category',

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

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

尝试在window.onresize中设置图表的大小, 在变量中设置ur图表,并设置获取输入值的高度和宽度

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

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

   myChart.setSize(w, h);
}

添加问题我想问的是关于上述图表的问题。在单轴图表上工作的解决方案。但是我在一个div中使用了多轴,那么它不工作了,你是什么意思?你能共用一把小提琴吗?不是完美的,但你有一个好主意