天道酬勤,学无止境

Resize highcharts using react-grid-layout not working

I am working in react and using highcharts with react-grid-layout to resize the elements in div. Somehow resizable feature is working for images but not with highchart. Grid.js is a file that makes ResponsiveReactGridLayout and it gets the highchart from chart.js file. Please find the code below.

//Grid.js
import React, { Component } from 'react';
import {Responsive, WidthProvider,ReactGridLayout} from 'react-grid-layout';
import Charts from './charts.js';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class Grid extends Component {

    onLayoutChange(layout) {
       console.log(layout);
    }

    render(){
        return (<div style={{borderStyle: 'groove'}}>
                <h2> Panel Header </h2>
                <ResponsiveReactGridLayout className="layout"
                                           breakpoints={{lg: 1200, md: 96, sm: 768}}
                                           cols={{lg: 5, md: 10, sm: 6}}
                                           onLayoutChange={this.onLayoutChange}>

                    <div key="c" data-grid={{x: 0, y: 0, w: 1, h: 3}} style={{ border:'1px solid green', borderStyle: 'groove'}}>
                        <img src="https://cdn.geckoandfly.com/wp-content/uploads/2013/03/530-smiley-face.jpg" style={{width:'inherit', height:'inherit'}} />
                    </div>
                    <div key="d" className = 'react-grid-item react-resizable'
                         data-grid={{x: 1, y: 0, w: 1, h: 3}} style={{ border:'1px solid green', borderStyle: 'groove'}}
                        >
                        <Charts style={{width:'inherit'}} id={'Chart 1'}/>
                    </div>
                    <div key="e" data-grid={{x: 2, y: 0, w: 1, h: 3}} style={{ border:'1px solid green',borderStyle: 'groove'}}>
                        <Charts style={{width:'inherit'}} id={'Chart 2'}/>
                    </div>
                    <div key="f" data-grid={{x: 3, y: 0, w: 1, h: 3}} style={{ border:'1px solid green',borderStyle: 'groove'}}>
                        <Charts style={{width:'inherit'}} id={'Chart 3'}/>
                    </div>
                </ResponsiveReactGridLayout>
            </div>
        )
    }
}
export default (Grid);


//Charts.js
import React, { Component } from 'react';
const Highcharts = require('highcharts');
class Charts extends Component{
    constructor(props){
        super(props);
        this.state = {
                data : {
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
                }]
            },
            pieData: [{name: "Firefox",y: 6},{name: "MSIE",y: 4},{name: "Safari",y: 4},{name: "Opera",y: 1},{name: "Chrome",y: 7}]
        };
    }

    /**
     * Inject highcharts markup into the DOM after the rest of the component has mounted
     * @return {None}
     */
    componentDidMount() {
        // Load in any highcharts modules
        if (this.props.modules) {
            this.props.module.forEach((module) => {
                module(Highcharts);
            });
        }

        // Create the actual chart and assign reference
        const props = this.processPropsModel(this.props);
        const containerRef = `container${props.id}`;
        this.chart = new Highcharts.chart(
            containerRef,
            props.options
        );
    }

    processPropsModel(props) {
        const newProps = {};
        newProps.id = this.props.id;
        newProps.options = this.generateDefaultOptions();
        return newProps;
    }

    /**
     * Generating some default chart options for placeholding purposes
     * @return {Object}       The options to be passed into the chart
     */
    generateDefaultOptions() {
        return {

            title: {
                text: this.props.id,
                x: -20 //center
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: null
                }
            },
            tooltip: {
                valueSuffix: '°C'
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        };
    }

    render(){
        const props = this.processPropsModel(this.props);
        return (
            <div id={`container${props.id}`}>
            </div>
        );
    }
}
export default Charts;

评论

So, I was struggling with the same issue using highcharts-react-official and react-grid-layout.

Here is how I finally got it working.


tl;dr

  1. Give height 100% to all of your chart's parents up to the grid item.
  2. There is an annoying div that highcharts creates by himself. Find a way to identify it and give it height 100%.
  3. Give height 100% to the chart itself.
  4. Use the react highcharts callback to get your chart object.
  5. When your component updates reflow your chart.

Below is my responsive grid layout, just to give some context.

// Component/Grid/Grid.js
<ResponsiveGridLayout
    ...
>
    {this.state.widgets.map((widget) =>
        <Card key={widget.DWG_ID}>
            <Widget
                widget={widget}
            />
        </Card>
    )}
</ResponsiveGridLayout>

Now, inside the Widget Component, set the height of any div that will be a parent of your highchart to 100%.

// Component/Widget/Widget.js
<CardBody className="widgetContent">
    <CardTitle className="widget-title">{this.props.widget.DWG_LABEL}</CardTitle>
    <Chart      
        widget={this.props.widget}
    />}     
</CardBody>   

For the jsx above I only needed to do this for the element CardBody with class widgetContent, so

// Component/Widget/Widget.css
.widgetContent { height: 100%; }

Now, in the chart component (where all the fun was), I had to create a very ugly div just to be able to identify the outer-most div that highcharts creates.

elements created by highcharts

The infamous div in question can be seen in the image above, right under the div with class highchartsWrapper, with the property data-highcharts-chart . This div was the only parent of my chart that I could not identify directly to give 100% height. So I created the wrapper to be able to identify it unequivocally. Note that in the chart options we passed a class name as well, to be able to give the chart itself the css height property.

If anybody has a neater idea of how to identify this problematic div please let me know.

// Component/Chart/Chart.js
options = {
    ...
    chart: { className: 'chart' }
}
<div className="highchartsWrapper">
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        callback={(chart) => this.setChart(chart)}
    />
</div>

So I could give it the css

// Component/Chart/Chart.css
.highchartsWrapper > div {
    height: 100%;
}
.chart {
    height: 100%;
}

Now your highchart would ideally assume the correct width and height. But there was another complication: when the highchart renders for the first time and checks his parent's height, react-grid-layout isn't yet done with his resizing magic. This means your chart will be teeny-tiny. Moreover, when you resize your grid items you want your highchart to resize to its new parent size. But wait, I've worked with highcharts before, I know how to do this! The good old chart.reflow() ! Unfortunately this ended up not being that easy.

To start with, just getting the chart object on which I can call reflow wasn't very straightforward. If you notice, I gave my HighchartsReact a callback

(chart) => this.setChart(chart)

This is just to store the chart object as a property of my class component. My setChart function does only the following:

setChart(chart) {
    this.chart = chart;
}

It might seem stupid to do it like this. Why not just give setChart directly to the callback property of HighchartsReact? Well because if you do, as per the highcharts-react-official documentation, your this inside the setChart function would be your chart object... All very confusing, but it seems to work like this.

Again, if somebody has a neater solution, let me know

Finally, we can call our this.chart.reflow() when our Chart Component is updated. what I did was something like

constructor() {
    super(props)

    this.firstResize = true;
}

componentDidUpdate(prevProps) {

    if (this.didWidgetSizeChange(prevProps) || this.isFirstResize) {
        this.chart.reflow();
        this.isFirstResize = false;
    }
}

When the component updates we call the chart reflow. On the componentDidMount the grid item doesn't have his final size yet, so I used a flag to figure out the first update (that would be exactly that: grid item has finished first resize). Then for any other update I wrote a function that basically compares the previous layout for this grid item with the new to decide if the size or width have changed. If so, we reflow again to resize the highcharts to the new grid item size.

Hope this helps!

Peace!

Here is the sample solution to make it fit in the Grid....

import React from 'react';
import './App.css';
import '/node_modules/react-grid-layout/css/styles.css';
import '/node_modules/react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

const options = {
  series: [
    {
      data: [1, 2, 3]
    }
  ]
};

class MyFirstGrid extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.conRef = React.createRef();
  }

  render() {
    // layout is an array of objects, see the demo for more complete usage
    var layout = [
      { i: "a", x: 0, y: 0, w: 5, h: 5 },
      { i: "b", x: 1, y: 0, w: 3, h: 2 },
      { i: "c", x: 4, y: 0, w: 1, h: 2 }
    ];
    return (
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
        onResizeStop={function(event) {

         this.myRef.current.chart.setSize(this.conRef.current.clientWidth,this.conRef.current.clientHeight)
          console.log('hello', event);
        }.bind(this)}
      >
        <div ref={this.conRef}  style={{ backgroundColor: "#00000000" }} key="a">
          <HighchartsReact
            ref= {this.myRef}
            containerProps={{ style: { width: '100%', height: '100%' } }}
            options={options}
            highcharts={Highcharts}
          />
        </div>

        <div style={{ backgroundColor: "red" }} key="b">
          b
        </div>
        <div style={{ backgroundColor: "blue" }} key="c">
          c
        </div>
      </GridLayout>
    );
  }
}


export default MyFirstGrid;

I think the reason why the functionality of resizing highchrts is not working you can find it from the documentation of 'reflow' from hightcharts

By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.

The situation matches what you did now: you tried to resize the div itself but not the window size, so it doesn't work as you expected.

What I did to make my charts resizable in grid as following:

  1. Create a function to do reflow
const onLayoutChange = () => {
    for (let i = 0; i < Highcharts.charts.length; i += 1) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow(); // here is the magic to update charts' looking
      }
    }
  };
  1. Use onLayoutChange provided by react-grid-layout
<GridLayout
    cols={12}
    layout={layout}
    rowHeight={30}
    width={1200}
    onLayoutChange={() => onLayoutChange()}
>
...
</GridLayout>

And then...BANG! you got resizable charts controlled by the resize button in react-grid-layout.

Make it easy to understand, you can view my playground here: https://codesandbox.io/s/resize-highcharts-in-grid-9e625?file=/src/App.js

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用Highcharts调整高度(Resize height with Highcharts)
    问题 我有一个Highchart,可以在窗口更改大小时很好地调整宽度。 但不是高度。 我尝试设置此图表大小,但无法正常工作。 更改窗口大小时,还有其他方法可以自动更改高度吗? 这是我的输出的CSS代码。 我有一个Jquery UI选项卡,另一个选项卡显示了数据表 #output-container { float: right; display: inline; position: absolute; right: 10px; left: 400px; top:120px; overflow-y: auto; } 这是我的chartdiv的css: #chartContainer{ margin: auto; } 这是js Chart函数: function qchart(){ chart = new Highcharts.Chart({ chart: { renderTo: 'chartContainer', type: 'column', spacingBottom: 3, //height: (screen.availHeight)-500, marginRight: 30, marginBottom: 30, reflow: true }, //etc.. }; //... } 回答1 但是,里卡多的答案是正确的
  • 高图-隐藏的图表无法正确调整大小(Highcharts - Hidden charts don't get re-size properly)
    问题 我目前有一个3标签页。 每个选项卡都是一个div,设置为display: hidden未选中时display: hidden 。 在这些选项卡中,我具有使用Susy(罗盘插件)创建的Grid系统。 每个选项卡页面都有一组Highcharts。 当我加载页面时,根据URl中的哪个选项卡,将加载其中一个选项卡。 所有图表看起来都不错,但是当我切换到其他选项卡时,某些图表无法正确地放入其div中。 如果我只是调整窗口大小,则将重新计算图表,然后它们将非常适合。 或者,如果我重新加载相同的选项卡,则图表也非常合适。 切换选项卡时,可以调用可以调整页面上所有图表大小的函数吗? 看起来像这样: 什么时候应该看起来像这样: 编辑:似乎这不是与海图直接相关的问题,例如我的谷歌地图看起来像这样: 但是当我调整窗口大小时,它可以正确调整: 切换选项卡时,是否可以通过JS中的函数调用来使CSS刷新/调整网格? 回答1 对我有用的是打电话给: $(window).resize(); 当我加载新标签时。 Google Maps API仍然存在问题,但与Highcharts配合使用时效果很好。 回答2 当您尝试渲染使用“ display:none”开始的内容时,会发现很多问题。 虽然$(window).resize()在许多情况下都可以工作,但我建议尝试在显示之前先渲染页面:没有一个生效。
  • Highcharts does not resize charts inside tabs
    I am using twitter bootstrap with tabs. I have multiple tabs and charts inside each tab. Upon browser resize, charts that are not on the current active tab do not get resized. Infact, it looks kind of funny with a thin bar. The current active tab works fine. Has anyone seen this issue and are there any workarounds ?
  • Resize height with Highcharts
    I have a Highchart which resizes the width beatuifully when the window change size. But not the height. I tried this set chart size but it's not working proberly. Is there any other way to automatically change the height when window change size? This is my css code for the output. I have a Jquery UI tab, the other tab is showing the datatable #output-container { float: right; display: inline; position: absolute; right: 10px; left: 400px; top:120px; overflow-y: auto; } This is my css for the chartdiv: #chartContainer{ margin: auto; } And this is the js Chart function: function qchart(){ chart =
  • 高位图表-有关完整图表宽度的问题(Highcharts - issue about full chart width)
    问题 我正在使用Highcharts柱形图,并且希望它是100%宽度响应图。 容器是一个简单的<div> ,没有任何格式。 加载文档时,图表始终为固定宽度600x400px的尺寸。 如果我调整窗口大小或切换到另一个浏览器选项卡,则该图表将填充宽度并像我想要的那样变为响应全角图表。 如果我重新加载页面,它将再次变为固定宽度。 我尝试将宽度设置为容器和图表,但是没有任何帮助。 如果我将容器div移到父div的上一级,则可以。 如何使图表在页面加载时也变为全角? 谢谢 回答1 图表的宽度取自jQuery.width(container) ,因此,如果您在某些隐藏的选项卡中或类似位置具有图表,则宽度将不确定。 在这种情况下,将设置默认的宽度和高度(600x400)。 回答2 我知道这是一个古老的问题,但我遇到了完全相同的问题,并找到了另一个有效的解决方案。 从Highcharts 4.1.5开始(也可能在旧版本中), chart对象具有reflow()函数。 在此处查看文档。 回流() 将图表重排到其容器中。 默认情况下,根据chart.reflow选项,在window.resize事件之后,图表会自动重排到其容器中。 但是,没有用于div调整大小的可靠事件,因此,如果在没有窗口调整大小事件的情况下调整容器的大小,则必须显式调用此事件。 希望它可以帮助其他人。
  • 在调整大小时移动在高图上渲染的图像(Move images rendered on highcharts on resize)
    问题 我使用chartWidth和chartHeight属性在图表加载事件中将图像添加到图表的右下角,以计算左/上偏移量。 chart.renderer.image('img.png', left, top, 30, 30).add(); 当浏览器窗口调整大小时,图表也会调整大小,但是图像保持固定在上面设置的位置。 当图表的宽度缩小时,我想根据新的图表宽度重新定位图像。 是否可以使用一些javascript移动元素,或者我必须删除它并使用新位置再次进行上述调用? 回答1 为什么不通过调整大小来删除图像,然后在完成调整图表大小后,重新计算位置并重新添加图像? 回答2 我最终存储了对图表和图像原始宽度的引用。 然后在调整大小时,我将图像移动了两个宽度的偏移量- var img, originalWidth; function chartLoad(chart) { var top = 100, left = 100; originalWidth = chart.chartWidth; img = chart.renderer.image('img.png', left, top, 30, 30).add(); } function chartResize(e) { var offset = e.target.chartWidth - originalWidth; img
  • Responsive Highcharts not sizing correctly until window resize
    I'm using Highcharts within Zurb's Foundation framework for a class project. I have three charts within a section tab. One is within a 12-column div, the other two are on the same row within 6-column divs. When the page loads, the featured chart does not take up the available width of the 12 columns, and the two smaller charts overflow their 6 columns. However, when the window is resized or I try to investigate using Inspect element, the charts immediately snap into the correct dimensions. This behavior occurs in Chrome, FF, and IE. I realize I could set a specific width, but I'd really like
  • Redraw/Resize highcharts when printing website
    When I'm printing the bottom right frame the text some text is partly covered by the highcharts because they don't resize before printing. Is there a solution to configure a printing layout with @media print for the website and force highcharts to redraw/resize to container size when website is printed? HTML <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="height: 400px"></div> <div id="container" style="height: 400px"></div> JavaScript $(function () { Highcharts.setOptions({ //
  • 当存在滚动条时,在引导程序流体跨度中,Highcharts图形宽度不正确(Highcharts graph width is incorrect when scrollbar is present, in bootstrap fluid span)
    问题 我不确定这是引导问题还是高图问题,但是我似乎无法正确调整图表大小; 当同时存在滚动条和引导跨度时,初始图表宽度太宽。 调整窗口大小似乎永远不会产生太宽的宽度,但有时它们却太窄。 在所有情况下,从span构造中删除代码似乎都会导致适当的宽度,因此我认为hc和bootstrap之间可能存在某些有害的相互作用。 我做了一个小提琴来演示,但是请记住,您的浏览器窗口需要足够短才能引起滚动条: http://jsfiddle.net/xEtherealx/Q5EGX/15/ 有没有办法我可以通过CSS强制宽度一致? 我可以在调整窗口大小时创建一个回调方法,但我宁愿找到一个合适的解决方案。 编辑:如建议的以下是一种解决方法,可以在超时后或页面加载后仅调用一次: this.setChartSize = function() { chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() ); return false; }; HTML: <div id="content" class="container-fluid"> <div class="row-fluid"> <div id="toresize" class="span3" style="background
  • Move images rendered on highcharts on resize
    I'm adding an image to the lower right hand corner of a chart in the chart loading event using the chartWidth and chartHeight properties to calculate the left / top offsets. chart.renderer.image('img.png', left, top, 30, 30).add(); When the browser window resizes the chart also resizes, but the image remains fixed at the position set above. When the chart shrinks in width, I'd like to re-position the image based on the new chart width. Is it possible to move the element using some javascript or do I have to remove it and make the above call again with the new position?
  • Highcharts不适用于Bootstrap 3模式主体(Highcharts won't fit in Bootstrap 3 modal body)
    问题 如何使用Bootstrap 3模态拟合并制作高图图表? 图表似乎独立于页面的CSS,但是我不确定。 <div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Assortment Analysis</h4> </div> <div class="modal-body"> <div class="panel panel-default"> <div class="panel-body"> <div id="container"></div> </div> </div> </div> <div
  • Highcharts graph width is incorrect when scrollbar is present, in bootstrap fluid span
    I'm not sure if this is a bootstrap or highcharts issue but I cannot seem to get my chart to size correctly; the initial chart width is too wide when both a scrollbar is present and in a bootstrap span. Resizing the window never seems to produce widths that are too wide but sometimes they are too narrow. Removing the code from the span construct seems to result in proper width in all situations so I am thinking that there may be some detrimental interaction between hc and bootstrap. I made a fiddle to demonstrate, but keep in mind that your browser window will need to be short enough to cause
  • Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()?
    When using Chart.setSize() I've noticed that the value chart.hasUserSize gets set to true. Once hasUserSize = true the chart will no longer respond to resize events if the window changes dimensions however if you set hasUserSize back to false it again responds to resize events. I've created a UX that allows the user to "expand" the chart container to 100% width however once I've called setSize() it no longer auto resizes until I remove the hasUserSize=true value. Since it's not a documented part of the API should this be considered a hack? The problem is I don't see a documented way to re
  • 调用Chart.setSize()之后,修改chart.hasUserSize是一个坏主意吗?(Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()?)
    问题 当使用Chart.setSize()时,我注意到chart.hasUserSize值设置为true。 一旦hasUserSize = true,则如果窗口更改尺寸,则图表将不再响应调整大小事件,但是,如果将hasUserSize设置为false,则图表将再次响应调整大小事件。 我创建了一个UX,它允许用户将图表容器“扩展”到100%的宽度,但是一旦我调用setSize(),它将不再自动调整大小,直到删除hasUserSize = true值为止。 由于它不是API的文档部分,因此应将其视为黑客吗? 问题是,一旦调用setSize(),我看不到有记录的方法可以在Highcharts中本地重新启用调整大小的代码。 它完全按照我现在想要的方式工作,但是我不想在代码中留下缺陷,而这些缺陷可能会在以后的Highcharts版本中再次引起我的注意。 http://jsfiddle.net/FZCNk/ chart.hasUserSize = false 这是一个jsfiddle,当调整窗口大小时,它演示了我在使用附带的“ hack”正在谈论的内容。 在单击任何内容之前,请调整窗口/图表窗格的大小,然后单击“大小”按钮并调整大小,它将在宽度上做出响应。 注释掉“ chart.hasUserSize = false”行,然后尝试调整大小。 这不是一个完美的示例
  • Highcharts - Hidden charts don't get re-size properly
    I currently have a 3 tabbed page. Each tab is a div that is set to display: hidden when not selected. In these tabs I have a Grid system created with Susy (compass plugin). Also each tab page has a set of Highcharts. When I load the page, depending on which tab is in the URl, one of the tabs is loaded. All of the charts look fine, however when I switch to a different tab, some of the charts are not fitting correctly in their div. If I just re-size the window, the charts are recalculated and then they fit perfectly. Or if I reload that same tab, the charts fit fine too. Can I call a function
  • Highcharts - issue about full chart width
    I'm using Highcharts column chart and I want it to be 100% width responsive chart. The container is a simple <div> with no any formatting. When the document loads, the chart is always fixed width 600x400px size. If I resize window or switch to another browser tab, the chart fills the width and becomes responsive full width chart just like I wanted. If I reload page, it's fixed width again. I tried setting width to both container and chart, however, nothing helps. If I move the container div one level above the parent div, It works. How to make the chart become full width on page load also
  • Aligning the xAxis of highcharts
    https://jsfiddle.net/hjzeo6u2/ In the above Link I have reproduced an issue where I wanted to align the X-Axis labels just below the respective series plots. As of now both the X-Axes labels are at the bottom of the complete plot of both the series which is not expected. I have tried with the align property of xAxis in from highcharts api reference https://api.highcharts.com/highcharts/xAxis.labels.align but could not find the expected solution. The expected result should be that each X-Axis has to be just below its corresponding plot. Just like a series plot and then its X-Axis after that
  • ReactJS-获取元素的高度(ReactJS - Get Height of an element)
    问题 React渲染元素后如何获取元素的高度? 的HTML <div id="container"> <!-- This element's contents will be replaced with your component. --> <p> jnknwqkjnkj<br> jhiwhiw (this is 36px height) </p> </div> ReactJS var DivSize = React.createClass({ render: function() { let elHeight = document.getElementById('container').clientHeight return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>; } }); ReactDOM.render( <DivSize />, document.getElementById('container') ); 结果 Size: 36px but it should be 18px after the render 它正在计算渲染之前的容器高度(36像素)。 我想获得渲染后的高度。 在这种情况下,正确的结果应为18px。
  • ERROR in Metadata version mismatch for module X found version 4, expected 3, resolving symbol Y
    I'm trying to build an Angular 4 app with angular-cli (ng build) and which uses ngx-clipboard. I suddenly started getting the following error a few days ago, even though my application source code has not changed: ERROR in Metadata version mismatch for module ngx-clipboard/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in ... If I revert to an older commit that used to work, it now still fails in the same way. I'm using npm for package management. Excerpt from my package.json: "dependencies": { "@angular/animations": "4.0.0", "@angular/common": "4.0.0", "@angular
  • Highchart in new window
    I use highcharts to display a chart in my page. It works fine, but some times data in graph is too "condensed" so I should find a way to see the graph in a greater size. I read several posts over internet on this subject: - in general they suggest to use highslide, but i don't want to, as my page is already overlaoded by scripts -somebody tries to pop up the content in a popup, it could fit to me but I didn't succeed - the only quasi-working example which fits to me seems to be the following: (inside the options object I add this properties). exporting: { buttons: { popUpBtn: { symbol: 'square