Question

我正在使用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>

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

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

如何才能使它的宽度在首页加载时正确，而不仅仅是调整大小？

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

更新

我发现问题是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

Answer 1

致电chart.reflow()帮助了我。文档：http://api.highcharts.com/highcharts#Chart.reflow

Answer 2

这就像魔法一样

在

之后输入你的css文件

.highcharts-container {
    width:100% !important;
    height:100% !important;
}

Answer 3

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

Answer 4

设置图表的宽度。这是唯一对我有用的选择。

chart: {
            type: 'line',
            width: 835
        },

Answer 5

我有一个类似的问题，以它给出的高图图居中。对于某些分辨率，它会正确地居中和大小，但不是全部。如果没有，我会遇到你在这里描述的完全相同的症状。

我通过将附加的css附加/覆盖到highcharts默认值来修复它。

所以在自定义css文件中添加

.highcharts-container{
/** Rules it should follow **/
}

应该解决您的问题。假设你的div“hg = graph”只有highcharts。

Answer 6

对于使用角度和自定义构建组件的用户，请记住在主机元素的css中定义尺寸display（例如block或flex）。

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

<强> HTML

<chart (load)="saveInstance($event.context)">
...
</chart>

<强> TS

  saveInstance(chartInstance: any) {
    this.chart = chartInstance;
    setTimeout(() => {
      this.chart.reflow();
    }, 0);
  }

否则图表会在加载时流过容器并仅在下次浏览器重排时获得正确的宽度（例如，当您开始调整窗口大小时）。

Answer 7

在文档中定义高级图表：

import syslog
def main():
    syslog.syslog(syslog.LOG_INFO, "Everything is working okay!")
    syslog.syslog(syslog.LOG_ERR, 'This is logged at the error level.')

if __name__ == "__main__":
    main()

和脚本：

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

希望它有效;）

Answer 8

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

在我的情况下，我有一个图表，根据最小值或最大值更新系列颜色。更新点后，高图宽度超过第一次加载时的容器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();

希望这对像我这样有同样问题的人有所帮助。：）

Answer 9

没有一个答案对我有帮助。我动态更改图表数据，最佳答案解决方案破坏了动画并导致图表位置跳跃。

我最终想出的解决方法是为图表包装元素设置一些填充（在我的例子中，图表左侧的某些部分被隐藏，所以我给出了一些左填充），然后设置图表主元素溢出属性可见。它有效，动画也很好。您可能需要对填充值进行一些试验才能使其完美显示。

<div class="chart-wrapper">
   <!-- high charts main element here -->
</div>

和风格

.chart-wrapper{
  padding-left: 20px;
}

.chart-wrapper > div:first-child{
  overflow: visible !important;
}

Answer 10

这可能是自2013年OP以来引入的，但是您应该可以使用chart.height（https://api.highcharts.com/highcharts/chart.height）来设置高度

                options: {
                    chart: {
                        type: 'bar',
                        height: window.innerHeight + 'px',
                    },
                    title: {
                        text: 'Top 10 Users',
                    },
                    subtitle: {
                        text: 'by scores',
                    },

这是一个基于Web的解决方案，但我希望您可以将其提供给jQuery.mobile

Answer 11

这是对我有用的解决方案！图表在一段时间内运行良好，然后在出现功能后，它们开始超出容器范围。原来这是我应用程序开头的脚本中的defer属性。

尝试删除javascript标记上的延迟：

<script defer src="script.js"></script> 至 <script src="script.js"></script>

或者将我的样式表链接移到头顶似乎也可以解决，但这不是一个可靠的解决方案。

Answer 12

最好的方法是在呈现事件函数documentation中调用chart.reflow；

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

并记住将最小宽度设置为零，并溢出以隐藏在图表容器中。

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

Answer 13

我刚刚看到有时候会有几个问题同时发生。

如果发生高度超过预期的高度：

SCSS风格：

.parent_container{

    position:relative;

    .highcharts-container{position: absolute; width:100% !important;height:100% !important;}
}

如果宽度超过容器（大于预期值）或未正确调整大小：

    let element = $("#"+id);
    element.highcharts({...});

    // For some reason it exceeds the div height.
    // Trick done to reflow the graph. 
    setTimeout(()=>{
        element.highcharts().reflow();
    }, 100 );

当摧毁图表并创建一个新图表时，最后一个发生在我身上......新版本的宽度超出了额外的尺寸。

Answer 14

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

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

Answer 15

我也遇到过这个问题，而.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首先呈现未定义的宽度？希望无论如何这对某人有帮助。

Answer 16

我通过确保包含的UI元素在图表之前呈现来解决此问题（对于我的情况），允许Highcharts计算正确的宽度。

例如：

在：

var renderChart = function(){ ... }; renderChart();

后：

var renderChart = function(){ ... }; setTimeout(renderChart, 0);

Answer 17

尝试将高清图生成封装在pageshow事件中

$(document).on("pageshow", "#hg_graph", function() {...});

Answer 18

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

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

并在html中设置overflow:auto

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

Answer 19

我在这方面挣扎太久了，找到了适合我的解决方案。关于我的设置的一些背景知识：

我在网站上的一个标签上加载了高价图表，该标签在登录网站时不可见。
切换到该标签时，图表远远超出了div。

所以，我在该特定标签上添加了一个唯一的ID，我们称之为tab5，然后绑定一个强制的点击功能 - 这是重要的部分 - {{1}容器div中的元素使用jQuery实现100％：

<svg>

......我的理智已经恢复了。目前。

Answer 20

请将width:100%添加到图表容器中。
希望这能解决overflow:hidden相关问题。

classname{min-height:450px;width: 100%;}

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

20 个答案: