2

当窗口缩小时，我无法让我的 highchart 缩小尺寸。

我在 JSFiddle http://jsfiddle.net/britboy/UvFaQ/中创建了我的代码示例

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

它是一个显示在表格中的简单 Highchart 图表 - 如果我让窗口更大，图表会扩展，但是如果我让窗口更小，图表不想缩小，而是表格会出现滚动条。

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

如何在表格中编码一个图表，当表格缩小时尺寸会减小？谢谢

4

3 回答 3

3

有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。

于 2013-04-25T12:49:08.957 回答
1

试试这个方法：

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

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

于 2015-04-09T09:10:04.167 回答
1

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

因为react-highcharts您可以简单地在窗口调整大小事件监听器中调用 React 组件的 forceUpdate() 方法。它将触发 Highcharts 重新绘制到新的更小的区域。另请参阅使用 React 重新渲染浏览器调整大小的视图

注意：我的代码flex-auto在父元素和 Highcharts DOM 元素中使用（参见 CSS 灵活框布局）进行了测试。知道这是否也适用于其他布局会很有趣。

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',
                    ...
                }}
                ...
            />
        );
    }
    ...
}
于 2018-06-02T13:03:32.510 回答