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

标签 javascript highcharts

High Chart Graph

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

   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 中设置图表的大小, 在 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

关于javascript - 如何使上面的图表响应窗口大小调整?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43651773/

相关文章:

javascript - Highcharts : How to update Plotoptions pointStart on Ajax call?

javascript - 当其他 div 具有相同的类时,如何要求 jquery 应用于一个 div

colors - 对同一图表中的所有系列使用单一颜色

javascript - Highchart 多个阈值颜色

javascript - Canvas 上的动画矩形

jquery - Highcharts - 每个客户 - 即使很小的日期/范围增量也必须可见

javascript - 有没有办法使用highstock最新版本绘制饼图?

javascript - 安全准确地将用户提供的 URL 数据插入 HTML5 文档的正确方法是什么?

javascript - 如何获得所需的元素样式?

javascript - jquery 记录所有函数调用