当窗口缩小时，如何使highcharts缩小

当窗口缩小时，我很难使我的highchart缩小

我已经在JSFIDLE中创建了一个代码示例

这是一个简单的Highchart图表，显示在表格中-如果我将窗口变大，图表将展开，但是如果我将窗口变小，图表不想缩小，而是表格将显示滚动条

我尝试设置一个调整大小事件，然后使用chart.setSize（）调整图表大小，但问题是包含图表的div永远不会进一步减小大小，因此setSize（）不会被触发。因为当图表容器变大时，图表会自动调整大小，所以当图表变小时，同样的方法也会起作用。我认为问题在于图表的大小阻止了它的容器收缩

如何在表格中编写图表，当表格缩小时，图表的大小会减小？ 谢谢

有n种方法可以实现它

其中之一就是@Azeem所指出的。在评论中

实际上，我用

窗口

绑定它。每当窗口重新调整大小时，bind事件都会触发一个函数来重新调整用于呈现图表的div元素的大小

$(window).bind("resize", resizeChart);

那么

function resizeChart() {
    var width = $(document).width() - 55;
    var height = $(document).height() - 60;
    $("#container").css("width", width);
    $("#container").css("height", height);
}

查看提琴样本

尝试以下方法：

var chart = $('#graph1').highcharts();
var DetailsWidth = $('#graph1');

---

[在此处为

react highcharts

添加解决方案，因为在谷歌上搜索“react highcharts shrink”时，这是第一个SO解决方案]

对于

react highcharts

，只需在窗口调整大小事件侦听器中调用react Component forceUpdate（）方法即可。这将触发海图重新绘制到新的较小区域。另见

注意：我的代码是在父元素和Highcharts DOM元素中使用

flex auto

（参见CSS Flexible Box Layout）进行测试的。这将是有趣的，知道这是否适用于其他布局也

import React      from 'react';
import Highcharts from 'react-highcharts';
...
export default class Chart extends React.Component {
    constructor(props) {
        ...
        // install callbacks
        this.resize = () => {
            // throttle resize events as redraw is expensive
            if (this.timeout)
                return;

            this.timeout = setTimeout(
                () => {
                    // force Highcharts to always adhere
                    // to changes in the view area
                    this.forceUpdate();
                    this.timeout = undefined;
                },
                50); // milliseconds
        };
        ...
    }
    ...
    componentDidMount() {
        ...
        // listen to window resize events
        window.addEventListener('resize', this.resize);
        ...
    }
    ...
    componentWillUnmount() {
        ...
        // remove listener when component goes away
        window.removeEventListener('resize', this.resize);
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timeout = undefined;
        }
        ...
    }
    ...
    render() {
        ...
        return (
            <Highcharts
                config={...}
                domProps={{
                    className: 'd-flex flex-auto',
                    ...
                }}
                ...
            />
        );
    }
    ...
}

从“React”导入React；
从“react Highcharts”导入Highcharts；
...
导出默认类图表扩展React.Component{
建造师（道具）{
...
//安装回调
this.resize=（）=>{
//限制事件大小，因为重画代价高昂
if（此.timeout）
返回；
this.timeout=setTimeout(
() => {
//强制海图始终保持一致
//查看视图区域中的更改
这个.forceUpdate（）；
this.timeout=未定义；
},
50）；//毫秒
};
...
}
...
componentDidMount（）{
...
//侦听窗口大小调整事件
window.addEventListener（'resize'，this.resize）；
...
}
...
组件将卸载（）{
...
//当组件消失时删除侦听器
window.removeEventListener（'resize'，this.resize）；
if（此.timeout）{
clearTimeout（this.timeout）；
this.timeout=未定义；
}
...
}
...
render（）{
...
返回(
);
}
...
}

查看[调整隐藏图表的大小+在windows上调整risize][1][1]：感谢您的回复。将resizeChart代码放在计时器上，然后专门执行chart.setSize（），以设置实际highcharts chart div对象的维度。

import React      from 'react';
import Highcharts from 'react-highcharts';
...
export default class Chart extends React.Component {
    constructor(props) {
        ...
        // install callbacks
        this.resize = () => {
            // throttle resize events as redraw is expensive
            if (this.timeout)
                return;

            this.timeout = setTimeout(
                () => {
                    // force Highcharts to always adhere
                    // to changes in the view area
                    this.forceUpdate();
                    this.timeout = undefined;
                },
                50); // milliseconds
        };
        ...
    }
    ...
    componentDidMount() {
        ...
        // listen to window resize events
        window.addEventListener('resize', this.resize);
        ...
    }
    ...
    componentWillUnmount() {
        ...
        // remove listener when component goes away
        window.removeEventListener('resize', this.resize);
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timeout = undefined;
        }
        ...
    }
    ...
    render() {
        ...
        return (
            <Highcharts
                config={...}
                domProps={{
                    className: 'd-flex flex-auto',
                    ...
                }}
                ...
            />
        );
    }
    ...
}