Question

当窗口调整大小时，我无法让我的高图减小尺寸。

我在JSFiddle http://jsfiddle.net/britboy/UvFaQ/

中创建了一个代码示例

<table border='1' width='100%'><tr><td width='100%'>
<div id="container" width='100%'></div>
</td></tr></table>

它是一个简单的高清图表显示在表格中 - 如果我使窗口变大，图表会扩大，但是如果我使窗口变小，则图表不希望减少，而是表格获得滚动条。

我已尝试设置调整大小事件，然后使用chart.setSize（）调整图表大小，但问题是包含图表的div永远不会减少任何进一步的大小，因此setSize（）不会被触发。由于图表容器变大时图表会自动调整大小，但是当图表变小时，我会这样做。我认为问题在于图表的大小正在阻止其容器缩小。

如何在表格中对图表进行编码，以减小表格的尺寸？感谢

Answer 1

n 有多种方法可以完成它。

有人会像@Azeem指出的那样。在评论中。

其他方式，我实际上是用window绑定它。每当窗口重新调整大小时，绑定事件就会触发一个函数来重新调整用于渲染图表的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);
}

查看示例小提琴 here 。

Answer 2

试试这个方法：

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

http://jsfiddle.net/cjohn/5ghzk4t8/4/

Answer 3

[在react-highcharts添加解决方案，因为在Google上搜索“react-highcharts shrink”时会弹出第一个SO解决方案

对于react-highcharts，您只需在窗口调整大小事件侦听器中调用React Component forceUpdate（）方法即可。它将触发Highcharts重绘到新的较小区域。另请参阅Rerender view on browser resize with React

注意：我的代码是使用父级和Highcharts DOM元素中的flex-auto（请参阅CSS Flexible Box布局）进行测试的。知道这是否适用于其他布局会很有趣。

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',
                    ...
                }}
                ...
            />
        );
    }
    ...
}

当窗口调整大小时，如何让我的highcharts减小尺寸

3 个答案: