天道酬勤,学无止境

使用 react-grid-layout 调整 highcharts 的大小不起作用(Resize highcharts using react-grid-layout not working)

问题

我正在反应并使用带有 react-grid-layout 的 highcharts 来调整 div 中元素的大小。 不知何故,可调整大小的功能适用于图像,但不适用于 highchart。 Grid.js 是一个制作 ResponsiveReactGridLayout 的文件,它从 chart.js 文件中获取 highchart。 请在下面找到代码。

//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;
回答1

所以,我在使用 highcharts-react-official 和 react-grid-layout 时遇到了同样的问题。

这是我最终让它工作的方式。


tl;博士

  1. 将高度 100% 分配给所有图表的父项,直到网格项。
  2. 有一个恼人的div,是highcharts 自己创建的。 找到一种方法来识别它并给它 100% 的高度。
  3. 为图表本身提供 100% 的高度。
  4. 使用 react highcharts 回调来获取您的图表对象。
  5. 当您的组件更新回流图表时。

下面是我的响应式网格布局,只是为了提供一些上下文。

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

现在,在 Widget Component 中,将作为 highchart 父级的任何 div 的高度设置为 100%。

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

对于上面的 jsx,我只需要为具有类 widgetContent 的元素 CardBody 执行此操作,因此

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

现在,在图表组件(所有的乐趣所在)中,我必须创建一个非常丑陋的 div,以便能够识别 highcharts 创建的最外面的 div。

由 highcharts 创建的元素

臭名昭著的 div 可以在上图中看到,就在具有类 highchartsWrapper 的 div 下方,具有属性 data-highcharts-chart 。 这个 div 是我图表的唯一父级,我无法直接识别以提供 100% 的高度。 所以我创建了包装器以便能够明确地识别它。 请注意,在图表选项中,我们还传递了一个类名,以便能够为图表本身提供 css 高度属性。

如果有人对如何识别这个有问题的 div 有更清晰的想法,请告诉我。

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

所以我可以给它css

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

现在您的 highchart 理想情况下会假设正确的宽度和高度。 但还有另外一个问题:当 highchart 第一次渲染并检查他父母的身高时,react-grid-layout 还没有完成调整大小的魔法。 这意味着您的图表将很小。 此外,当您调整网格项目的大小时,您希望 highchart 调整到其新的父级大小。 但是等等,我以前用过highcharts,我知道怎么做! 好旧的 chart.reflow() ! 不幸的是,这最终并没有那么容易。

首先,仅仅获取我可以调用回流的图表对象并不是很简单。 如果你注意到,我给了我的 HighchartsReact 一个回调

(chart) => this.setChart(chart)

这只是为了将图表对象存储为我的类组件的属性。 我的 setChart 函数仅执行以下操作:

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

这样做可能看起来很愚蠢。 为什么不直接将 setChart 赋予 HighchartsReact 的回调属性? 好吧,因为如果你这样做,根据 highcharts-react-official 文档,你在 setChart 函数中的 this 将是你的图表对象......一切都非常令人困惑,但它似乎是这样工作的。

同样,如果有人有更简洁的解决方案,请告诉我

最后,当我们的图表组件更新时,我们可以调用我们的 this.chart.reflow()。 我所做的就像

constructor() {
    super(props)

    this.firstResize = true;
}

componentDidUpdate(prevProps) {

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

当组件更新时,我们称之为图表回流。 在 componentDidMount 上,网格项还没有最终大小,所以我使用了一个标志来确定第一次更新(这就是:网格项已完成第一次调整大小)。 然后对于任何其他更新,我编写了一个函数,该函数基本上将这个网格项目的先前布局与新布局进行比较,以确定大小或宽度是否发生了变化。 如果是这样,我们再次回流以将 highcharts 大小调整为新的网格项大小。

希望这可以帮助!

和平!

回答2

这是使其适合网格的示例解决方案....

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;
回答3

我认为调整 highchrts 大小的功能不起作用的原因您可以从 hightcharts 的“回流”文档中找到它

默认情况下,根据 chart.reflow 选项,图表会在 window.resize 事件之后自动回流到其容器。 但是,没有可靠的 div resize 事件,因此如果在没有窗口 resize 事件的情况下调整容器大小,则必须显式调用它。

这种情况与您现在所做的相符:您尝试调整 div 本身的大小而不是窗口大小,因此它没有按预期工作。

我做了什么使我的图表在网格中可调整大小,如下所示:

  1. 创建一个函数来进行回流
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. 使用react-grid-layout提供的onLayoutChange
<GridLayout
    cols={12}
    layout={layout}
    rowHeight={30}
    width={1200}
    onLayoutChange={() => onLayoutChange()}
>
...
</GridLayout>

然后……砰! 您可以通过react-grid-layout的调整大小按钮控制可调整大小的图表。

让它容易理解,你可以在这里查看我的游乐场: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>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 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); }
  • 响应式 Highcharts 在窗口调整大小之前无法正确调整大小(Responsive Highcharts not sizing correctly until window resize)
    问题 我在 Zurb 的 Foundation 框架中使用 Highcharts 进行课堂项目。 我在一个部分选项卡中有三个图表。 一个位于 12 列 div 内,另外两个位于 6 列 div 内的同一行。 当页面加载时,特色图表没有占用 12 列的可用宽度,两个较小的图表溢出了它们的 6 列。 但是,当调整窗口大小或我尝试使用 Inspect 元素进行调查时,图表会立即对齐到正确的尺寸。 此行为发生在 Chrome、FF 和 IE 中。 我意识到我可以设置一个特定的宽度,但我真的很想利用 Foundation 并让它们保持响应。 我已经调整了 CSS 和 Highcharts 初始化,但我很难过。 有没有其他人遇到过这个问题? 谁能看到我错过了什么? 这是我的 HTML 的摘录: <div class="row"> <div class="twelve columns"> <!--begin tabs below--> <div class="section-container tabs" data-section="tabs"> <section> <p class="title" data-section-title><a href="#">Heart Disease</a></p> <div class="content" data-section-content 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 不会在选项卡内调整图表大小(Highcharts does not resize charts inside tabs)
    问题 我正在使用带有标签的 twitter bootstrap。 我在每个选项卡中都有多个选项卡和图表。 浏览器调整大小时,不在当前活动选项卡上的图表不会调整大小。 事实上,用细条看起来有点有趣。 当前活动选项卡工作正常。 有没有人看到这个问题,是否有任何解决方法? 回答1 这是一个工作示例: http://codepen.io/colinsteinmann/pen/BlGfE 单击选项卡时,基本上会在每个图表上调用 .reflow() 函数。 这样,当容器可见时,图表会根据应用于容器的新维度重新绘制。 这是最重要的代码片段: // fix dimensions of chart that was in a hidden element jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class var chart = jQuery(this).highcharts(); // target the chart itself chart
  • 在调整大小时移动在高图上渲染的图像(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
  • 高图-隐藏的图表无法正确调整大小(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()在许多情况下都可以工作,但我建议尝试在显示之前先渲染页面:没有一个生效。
  • jQuery调整大小在FireFox,Chrome和Safari上不起作用(jQuery resize not working at FireFox, Chrome and Safari)
    问题 $("#dvMyDIV").bind("resize", function(){ alert("Resized"); }); 或者 $("#dvMyDIV").resize(function(){ alert("Resized"); }); 问题 为什么在FireFox,Chrome和Safari上不起作用? 因为其他浏览器无法处理调整大小,这是否可以视为jQuery错误? 唯一的解决方法是调用SetTimeout函数来检查clientHeight和clientWidth吗? 使用jQuery有任何解决方法吗? 回答1 我相信JavaScript调整大小事件仅适用于框架或窗口,不适用于DIV。 例如,请参见此页面: 每当用户或脚本调整窗口或框架的大小时,onResize偶数处理程序都用于执行指定的代码。 这使您可以查询窗口元素的大小和位置,动态重置SRC属性等。 因此,如果要检测何时调整窗口大小,则在jQuery中可能应该使用$(window).resize(function() { }); 编辑:如果您想观看DIV的大小,则取决于您的意图。 如果要使用JavaScript调整大小,则可以实现一种方法来执行调整大小,并让该方法调用任何其他调整大小的代码。 否则,如果您只是在有人调整窗口大小时看着DIV调整大小,那么将调整大小侦听器附加到窗口,然后检查DIV是否已调整大小
  • 打印网站时重绘/调整highcharts(Redraw/Resize highcharts when printing website)
    问题 当我打印右下角的文本时, some text被高图部分覆盖,因为它们在打印前不会调整大小。 是否有解决方案可以为网站配置带有@media print的打印布局,并在@media print网站时强制 highcharts 重新绘制/调整为容器大小? 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({ // Apply to all charts chart: { events: { beforePrint: function () { this.oldhasUserSize = this.hasUserSize; this.resetParams = [this.chartWidth, this.chartHeight, false]; this
  • jQuery调整大小功能在页面加载时不起作用(jQuery resize function doesn't work on page load)
    问题 如何获得此功能,使其不仅可以在窗口调整大小时运行,而且还可以在初始页面加载时运行? $(window).resize(function() { ... }); 回答1 您将要使用: $(document).ready(function() { /* your code */ }); 为了使某些事情发生在负载上。 如果您希望某些东西在加载和调整大小时起作用,则应该执行以下操作: onResize = function() { /* your code */ } $(document).ready(onResize); $(window).bind('resize', onResize); 回答2 我认为最好的解决方案是将其绑定到load和resize事件: $(window).on('load resize', function () { // your code }); 回答3 此行为是设计使然。 您应该将代码放入命名函数中,然后调用该函数。 例如: function onResize() { ... } $(onResize); $(window).resize(onresize); 或者,您可以制作一个插件来自动绑定并执行处理程序: $.fn.bindAndExec = function(eventNames, handler) { this.bind
  • 调整浏览器大小时,Modernizr Media查询不起作用(Modernizr Media query doesn’t work when resize browser)
    问题 我在JavaScript中使用Modernizr媒体查询来更改元素边距并添加“小”类。 调整浏览器大小时,我的Modernizr媒体查询不起作用,但是刷新页面后它才起作用。 我知道我可以使用jQuery $( window ).resize()函数解决此问题,但是我想使用媒体查询来解决它。 谁能告诉我如何解决这个问题? <html class="no-js"> <head> <title>Foundation 5</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="modernizr.js"></script> <script type="text/javascript"> $(document).ready(function() { if (Modernizr.mq('(max-width: 767px)')) { $("#secondary").addClass("small"); $("#secondary").css("margin", " 25px"); } }); </script> <style type="text/css"> #primary { width: 300px; height
  • 当存在滚动条时,在引导程序流体跨度中,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
  • Slick Grid 包裹在指令(角度)中,某些选项不起作用(调整大小和拖放列)(Slick Grid wrapped in directive (angular), some options not work (resize and drag&drop columns))
    问题 当我将 Slick Grid 插件包装到指令中时,一些 Slick Grid 选项(调整大小和拖放列)不起作用。 我认为这些事件可能与指令冲突。 有没有人有任何见解? 我的html: <div style="width:600px;height:500px;" s-grid></div> 我的指令: angular.module('slickGrid.directive', []) .directive('sGrid', [function () { return { restrict: 'EA', link : function(scope, element, attrs){ // for clearer present I initialize data right in directive // start init data var columns = [ {id: "title", name: "Title", field: "title"}, {id: "duration", name: "Duration", field: "duration"}, {id: "%", name: "% Complete", field: "percentComplete"}, {id: "start", name: "Start", field: "start"}, {id:
  • 在iOS 7中动态调整标签大小(Dynamically resize label in iOS 7)
    问题 在iOS 6中,我正在使用: CGSize labelSize = [self.text sizeWithFont:self.font constrainedToSize:size lineBreakMode:self.lineBreakMode]; self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y , labelSize.width, self.frame.size.height); 动态调整UILabel的大小。 这在iOS 7中不起作用,所以我尝试了: NSString *text = self.text; CGFloat width = size.width; UIFont *font = self.font; NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:text attributes:@{ NSFontAttributeName: font }]; CGRect rect = [attributedText boundingRectWithSize:(CGSize){width, CGFLOAT_MAX} options
  • JavaScript窗口调整大小事件(JavaScript window resize event)
    问题 如何挂钩浏览器窗口调整大小事件? 有一种jQuery侦听调整大小事件的方式,但我不希望仅出于这一要求就将其带入我的项目中。 回答1 jQuery只是包装了标准的resize DOM事件,例如。 window.onresize = function(event) { ... }; jQuery可以做一些工作来确保在所有浏览器中一致地触发resize事件,但是我不确定任何浏览器是否有所不同,但是我建议您在Firefox,Safari和IE中进行测试。 回答2 首先,我知道上面的注释中已经提到了addEventListener方法,但是我没有看到任何代码。 由于这是首选方法,因此它是: window.addEventListener('resize', function(event){ // do stuff here }); 这是一个工作示例。 回答3 切勿覆盖window.onresize函数。 而是,创建一个将事件侦听器添加到对象或元素的函数。 这会检查并防止侦听器不起作用,然后作为最后手段重写该对象的功能。 这是在jQuery之类的库中使用的首选方法。 object :元素或窗口对象 type :调整大小,滚动(事件类型) callback :函数参考 var addEvent = function(object, type, callback) { if (object
  • 如何在角度 2 中立即检测窗口调整大小?(How I can detect window resize instantly in angular 2?)
    问题 我的组件中的某些功能打开或关闭取决于浏览器大小,因此我想在调整大小事件时检查浏览器宽度。 但是,我可以使用 OnInit 方法来做到这一点。 但是当调整大小发生更新浏览器宽度时我需要刷新浏览器 ngOnInit() { if (window.innerWidth <= 767){ ---- do something } } 我尝试使用 OnChanges 方法,但它也不起作用。 OnChanges(changes:SimpleChanges){ console.log( 'width:====>' + changes[window.innerWidth].currentValue); if ( changes[window.innerWidth].currentValue <= 767 ){ ---- do something } } 是否有任何建议或替代方法来实现这一目标? 回答1 您可以将处理程序放在window对象上的resize事件上,但这将允许您仅放置单个resize事件, onresize上的最新注册事件将起作用。 constructor(private ngZone:NgZone) { window.onresize = (e) => { //ngZone.run will help to run change detection this.ngZone.run
  • HighCharts 全宽问题(HighCharts full width issue)
    问题 我试图让我渲染的图表填充父 div 的 100%,但没有成功。 有什么办法可以消除左右两边的缝隙吗? http://jsfiddle.net/sKV9d/ var chart = new Highcharts.Chart({ chart: { renderTo: 'chart', margin: 0, width: 300, height: 200, defaultSeriesType: 'areaspline' }, series: [{ data: [33,4,15,6,7,8, 73,2, 33,4,25], marker: { enabled: false } }] }); 回答1 如果删除选项width: 300, height: 200像这样: var chart = new Highcharts.Chart({ chart: { renderTo: 'chart', margin: 0, defaultSeriesType: 'areaspline' }, ... 它会自动填充容器。 回答2 问题是因为 jquery UI。 渲染图表后调用此代码以重排图表。 这解决了我的问题 chart.reflow(); 回答3 将minPadding和maxPadding设置为 0,请参阅:http://jsfiddle.net/sKV9d/3/ 回答4 我解决了
  • 高位图表-有关完整图表宽度的问题(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调整大小的可靠事件,因此,如果在没有窗口调整大小事件的情况下调整容器的大小,则必须显式调用此事件。 希望它可以帮助其他人。
  • WebView不会调整大小(WebView doesn't resize)
    问题 我已经为Firefox OS开发了一个Web应用程序,但是我想使其在Android中“本机”运行。 我的应用程序包含一个对话框,该对话框是一个div ,它在可见时会填充整个页面,我已经使用Firefox响应式设计工具对其进行了测试,并且该对话框的大小也可以正确调整。 当出现软键盘时,由于对话框底部有一些按钮,我希望对话框调整为剩余的视口大小。 我创建了一个应用程序,其中包含一个仅包含WebView 。 我想在键盘出现时调整视图大小,所以我使用了: android:windowSoftInputMode="stateUnspecified|adjustResize" 可见键盘时,这对WebView似乎没有任何影响。 我在网上看了看,有很多人抱怨这个问题,但是他们都有相同的共同点,他们使用的是Theme.Black.NoTitleBar.Fullscreen主题,但我不是。 我尝试了解决该问题的所有解决方案,但没有一个起作用。 然后,我开始怀疑WebView是否存在错误,这意味着它没有调整大小。 因此,我编写了一个自定义View ,该View在onLayout打印了尺寸。 @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { Log.d(TAG, t + " " + r +
  • 如何动态调整jQuery Colorbox插件的大小?(How can I dynamically resize the jQuery Colorbox plugin?)
    问题 加载到Colorbox中的AJAX内容包含一些JavaScript,可以调整内容中内容的大小。 Colorbox根据所有AJAX发生之前的大小确定其大小。 加载内容后,如何调整Colorbox的大小? 这是一个链接,有人说可以在加载后再次调用colorbox(),但是我不知道该怎么做: http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0 回答1 要动态调整颜色框的大小,您要说。 colorbox.resize({width:"300px" , height:"300px"}) 如果您要调整加载iframe的颜色框的大小,则可以在目标文档的开头添加类似的内容。 $(document).ready(function(){ var x = $('mydiv').width(); var y = $('mydiv').height(); parent.$.colorbox.resize({width:x, height:y}); }); 回答2 在Colorbox 1.3中,您现在可以调用调整大小功能: $('.item').colorbox.resize(); 回答3 调用颜色框时,只需向其添加onComplete函数,例如 $('.mycolorboxes').colorbox
  • Google Maps v3部分加载在左上角,调整大小事件不起作用(Google Maps v3 load partially on top left corner, resize event does not work)
    问题 Google Maps V3部分加载在左上角。 我尝试了以下方法: 添加google.maps.event.trigger(map, 'resize'); 地图初始化后。 在索引文件中重新排列<script>标签 但是没有一个适合我。 如何解决这个问题。 这个问题有官方的错误和解决方案吗? index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from LayoutIt!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Bootstrap css files --> <link href="stylesheets/bootstrap.min.css" rel="stylesheet"> <link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet"> <link href="stylesheets/style.css"