Highcharts宽度超过第一次加载时的容器div-Java 学习之路

我正在使用Highcharts和jQuery Mobile .

我在jQM data-role="content" 容器中绘制了一个区域图，在该容器中我有以下div：

<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
    <div id="hg_graph" style="width: 100%"></div>
</div>

我的highcharts图是从他们的一个示例中获取的基本图，其中我没有设置图表 width 属性 .

在第一次加载时，图形超出了包含div的宽度，但是当我调整浏览器大小时，它会捕捉到适当的宽度 .

我怎样才能使它的宽度在第一页加载时正确，而不仅仅是调整大小？

我已经回顾了关于堆栈溢出的类似帖子，但没有一个解决方案似乎有效 .

UPDATES

我发现问题是Highcharts动态生成的 <rect> 标签占用了页面加载时浏览器窗口的全宽，而根本没有取出容器div宽度 . 这是我检查时生成的html：

<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>

我试图在JSFiddle中重现，但它似乎在那里工作正常，这真的让我难过 . 这是我的JSFiddle代码：http://jsfiddle.net/meandnotyou/rMXnY

17 回答

在文档中定义高架图：

<div style="width:50%" id="charts">

和脚本：

$(document).ready(function(){
    $(#chart).highcharts(){
    ...
    });
)};

希望它有效;）

回复于 2024-04-28T14:28:40+08:00

0
尝试将高清图生成封装在pageshow事件中
```
$(document).on("pageshow", "#hg_graph", function() {...});
```
回复于 2024-04-28T14:28:40+08:00
12
我通过确保包含UI元素在图表之前呈现来解决此问题（对于我的情况），允许Highcharts计算正确的宽度 .

例如：

之前：
```
var renderChart = function(){
...
};
renderChart();
```
后：
```
var renderChart = function(){
...
};
setTimeout(renderChart, 0);
```
回复于 2024-04-28T14:28:40+08:00
26

给 chart.reflow() 打电话帮助了我 . 文件：http://api.highcharts.com/highcharts#Chart.reflow

回复于 2024-04-28T14:28:40+08:00
0
这就像魔法一样

把你的css文件放在下面
```
.highcharts-container {
    width:100% !important;
    height:100% !important;
}
```
回复于 2024-04-28T14:28:40+08:00
0

我有同样的问题，在我的情况下有一个highchart图表，它点击一个按钮后显示 . 我在show事件之后放了 $(window).resize(); ，它正确解决了问题 . 我希望你服务 .

回复于 2024-04-28T14:28:40+08:00
4
设置图表的宽度 . 这是唯一对我有用的选择 .
```
chart: {
            type: 'line',
            width: 835
        },
```
回复于 2024-04-28T14:28:40+08:00
31
我有一个类似的问题，它集中了它给出的highcharts图 . 对于某些分辨率，它会正确地居中和大小，但不是全部 . 如果没有，我有完全相同的症状，你在这里描述 .

我通过附加/覆盖额外的css到highcharts默认值来修复它 .

所以在自定义css文件中添加
```
.highcharts-container{
/** Rules it should follow **/
}
```
应该解决你的问题 . 假设你的div“hg = graph”只有highcharts .
回复于 2024-04-28T14:28:40+08:00
0
对于那些使用角度和定制构件的人，请记住在主机元素的css（例如 block 或 flex ）中定义尺寸为 display .

当图表容器有填充时，您可能会发现这是必不可少的：

html
```
<chart (load)="saveInstance($event.context)">
...
</chart>
```
ts
```
saveInstance(chartInstance: any) {
    this.chart = chartInstance;
    setTimeout(() => {
      this.chart.reflow();
    }, 0);
  }
```
否则，图表将在加载时流出容器，并仅在下次浏览器重排时获得正确的宽度（例如，当您开始调整窗口大小时） .
回复于 2024-04-28T14:28:40+08:00
-1
我也遇到过这个问题，而.highcharts-container css解决方案对我来说并不适用 . 我设法通过将ng-class条件（将容器div设置不同的宽度）拆分为单独的div来解决它 .

比如，这个
```
<div ng-class="condition?'col-12':'col-6'">
    <chart></chart>
</div>
```
成
```
<div ng-show="condition" class="col-12">
    <chart></chart>
</div>
<div ng-show="!condition" class="col-6">
    <chart></chart>
</div>
```
我无法告诉你为什么它有效 . 我猜测ng-class需要更长的时间来计算容器宽度，所以highcharts首先呈现未定义的宽度？希望无论如何这对某人有帮助 .
回复于 2024-04-28T14:28:40+08:00
0

我在我的应用程序中也有相同的问题，我使用角度，我也使用ngCloak指令，我已删除，因为我不需要它

这样做之后我的问题就解决了 .

回复于 2024-04-28T14:28:40+08:00
0
我刚刚看到，有时会同时发生几个问题 .

If it happens the height exceed the expected heigh:

SCSS风格：
```
.parent_container{

    position:relative;

    .highcharts-container{position: absolute; width:100% !important;height:100% !important;}
}
```
如果 width exceeds the container (bigger than what's supposed to) or does not resize properly to smaller one ：
```
let element = $("#"+id);
    element.highcharts({...});

    // For some reason it exceeds the div height.
    // Trick done to reflow the graph. 
    setTimeout(()=>{
        element.highcharts().reflow();
    }, 100 );
```
当摧毁图表并创建一个新图表时，最后一个发生在我身上...新版本的宽度超出额外宽度 .
回复于 2024-04-28T14:28:40+08:00

-1

我也遇到过这个问题 . 两者都受到图表桌面和移动视图的影响 .

在我的情况下，我有一个 Chart that update the series color depending on min or max . 更新点后，高图宽度超过第一次加载时的容器div .

为了解决这个问题，我所做的是在更新点之后添加 chart.reflow(); .

CODE:

//First declare the chart
var chart = $('#TopPlayer').highcharts();
//Set the min and max
var min = chart.series[0].dataMin; //Top Losser
var max = chart.series[0].dataMax; //Top Winner

for (var i = 0; i < chart.series[0].points.length; i++) {
    if (chart.series[0].points[i].y === max) {
        chart.series[0].points[i].update({
            color: 'GREEN',
        });
    }
    if (chart.series[0].points[i].y === min) {
        chart.series[0].points[i].update({
            color: 'RED',
        });
    }
}

// redraw the chart after updating the points
chart.reflow();

希望这有助于那些像我一样有同样问题的人 . :)

回复于 2024-04-28T14:28:40+08:00

我今天遇到了同样的问题 - 不是在移动设备上，而是在第一页加载时窗口小 . 当页面加载时，图表被隐藏，然后在页面上的一些选择之后，我们创建图表 . 我们设置了最小宽度和最大宽度容器在css中，但不是宽度 .

创建图表时，需要确定创建SVG的维度 . Since the chart is hidden, it cant get the dimensions properly so the code clones the chart container, positions it off-screen and appends it to the body so that it can determine the height/width.

由于未设置宽度，克隆的div会尝试占用尽可能多的空间 - 直到我设置的最大宽度 . SVG元素是使用该宽度创建的，但是添加到当前较小的图表容器div中（基于屏幕的大小） . 结果是图表延伸超过容器div的边界 .

图表首次渲染后，屏幕尺寸已知，并且未调用克隆功能 . 这意味着任何窗口调整大小或重新加载图表数据都会导致图表正确调整大小 .

我通过覆盖Highcharts函数 cloneRenderTo 解决了这个初始加载问题，该函数克隆了div来获取维度：

(function (H) {
    // encapsulated variables
    var ABSOLUTE = 'absolute';

    /**
    * override cloneRenderTo to get the first chart display to fit in a smaller container based on the viewport size
    */
    H.Chart.prototype.cloneRenderTo = function (revert) {
        var clone = this.renderToClone,
            container = this.container;

        // Destroy the clone and bring the container back to the real renderTo div
        if (revert) {
            if (clone) {
                this.renderTo.appendChild(container);
                H.discardElement(clone);
                delete this.renderToClone;
            }

            // Set up the clone
        } else {
            if (container && container.parentNode === this.renderTo) {
                this.renderTo.removeChild(container); // do not clone this
            }
            this.renderToClone = clone = this.renderTo.cloneNode(0);
            H.css(clone, {
                position: ABSOLUTE,
                top: '-9999px',
                display: 'block' // #833
            });
            if (clone.style.setProperty) { // #2631
                clone.style.setProperty('display', 'block', 'important');
            }
            doc.body.appendChild(clone);

            //SA: constrain cloned element to width of parent element
            if (clone.clientWidth > this.renderTo.parentElement.clientWidth){
                clone.style.width = '' + this.renderTo.parentElement.clientWidth + 'px';
            }

            if (container) {
                clone.appendChild(container);
            }
        }
    }

})(Highcharts);

我将此函数保存在一个单独的脚本文件中，该文件在Highchart.js脚本加载后加载 .

回复于 2024-04-28T14:28:40+08:00

最好的方法是在渲染事件函数documentation中调用chart.reflow;

Highcharts.stockChart( 'chartContainer', {
 chart: {
  events: {
    render: function() {
      this.reflow();
    }
  },
  zoomType: 'x',
   ...
},

并记住将min-width设置为零并溢出到图表容器中的隐藏 .

#chartContainter {
  min-width: 0;
  overflow: hidden;
  }

回复于 2024-04-28T14:28:40+08:00

对我来说，我设置图表宽度：

$('#container').highcharts({
    chart: {
        backgroundColor: 'white',
        **width:3000**,
        ..... }

并在html中设置 overflow:auto

<div id="container" style="**width:100%;overflow:auto**;" ></div>

回复于 2024-04-28T14:28:40+08:00

0
我挣扎了这么久，发现了一个适合我的解决方案 . 我的设置有一些背景知识：
- highcharts图表正在我网站上的一个标签上加载，该标签在登录网站时不可见 .
- 切换到该选项卡时，图表远远超出了div .
所以，我将一个唯一的ID附加到该特定选项卡，我们称之为 tab5 ，然后绑定一个强制的单击函数 - 这是重要的部分 - 使用jQuery将容器div中的 <svg> 元素设置为100％：
```
$('#tab5').bind('click', function() {
    $('#container_div svg').width('100%');
});
```
......我的理智已经恢复了 . 目前 .
回复于 2024-04-28T14:28:40+08:00

Highcharts宽度超过第一次加载时的容器div

17 回答

相关问题