Jquery mobile Highcharts宽度超过第一次装载时的集装箱div

我在jQuery Mobile上使用Highcharts

我在jQM

data role=“content”

容器中绘制了一个面积图，在该容器中我有以下div：

我的highcharts graph是一个基本图形，取自我没有设置chart

width

属性的示例之一

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

如何使它的宽度正好在第一页加载时，而不仅仅是在调整大小时

我看过关于堆栈溢出的类似文章，但没有一个解决方案是有效的

更新

我发现问题在于Highcharts动态生成的

标记占用了页面加载时浏览器窗口的整个宽度，而根本没有占用Container div的宽度。以下是我检查时生成的html：

我试图在JSFIDLE中复制，但它似乎在那里工作得很好，这确实让我感到困惑。以下是我的JSFIDLE代码：

---

我有一个类似的问题，它给了高度图表居中。对于某些分辨率，但不是所有分辨率，它的中心和大小都正确。当它没有，我有完全相同的症状，你在这里描述

我通过在highcharts默认值中附加/覆盖其他css来修复它

因此，在自定义css文件中，添加

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

---

应该解决你的问题。假设您的div“hg=graph”只有highcharts。请尝试将highchart生成封装在pageshow事件中

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

---

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

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

这就像魔术

在css文件中输入以下内容

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

---

我也有同样的问题，在我的例子中有一个highchart的图表，它在点击一个按钮后显示。我将

$（window.resize（）显示事件后，它正确地解决了问题。我希望你能为我服务。
打电话给
chart.reflow（）
帮了我的忙。
文档：
我通过确保包含的UI元素在图表之前呈现，允许Highcharts计算正确的宽度，解决了这个问题（在我的案例中）

例如：

之前：

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

之后：

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

我也遇到过这个问题，而.highcharts容器css解决方案对我不起作用。我通过将ng类条件（为容器div设置不同的宽度）拆分为单独的div，成功地解决了这个问题

例如，这个

<div ng-class="condition?'col-12':'col-6'">
    <chart></chart>
</div>



进入



我真的不能告诉你为什么它会起作用。我猜ng类计算容器宽度需要更长的时间，所以highcharts首先使用未定义的宽度进行渲染？希望这对其他人有所帮助。
我的应用程序中使用angular时也存在同样的问题
我还使用了ngclope指令，我已经删除了它，因为我不需要它

这样做之后，我的问题就解决了。
我刚刚看到，有时会有几个问题同时发生

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

//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();

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 );

最后一次发生在我身上，是在销毁图表并创建新图表时。。。新版本的宽度增加了。
我也遇到了这个问题。在图表的桌面和移动视图中均受影响

在我的例子中，我有一个图表，它根据最小值或最大值更新系列颜色。更新点后，highcharts宽度在第一次加载时超过容器div

为了解决这个问题，我添加了chart.reflow（）更新点后

代码：

//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();

//首先声明图表
变量图表=$（“#顶层”）.highcharts（）；
//设置最小值和最大值
var min=chart.series[0].dataMin//顶部损耗器
var max=chart.series[0].dataMax//冠军
对于（var i=0；i

希望这对像我一样有同样问题的人有所帮助。：）
 定义文档中的highcharts ready：

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

希望它能起作用；）
 对于我，我设置了图表宽度：

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

在html集合中溢出：自动

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

我为此挣扎了太久，找到了一个适合我的解决方案。关于我的设置的一点背景：

highcharts图表加载到我网站上的一个选项卡上，在登录该网站时不可见
当切换到该选项卡时，图表远远超出了div
因此，我将一个唯一ID附加到该特定选项卡，我们将其称为
tab5
，然后绑定一个click函数，该函数使用jQuery将容器div中的
元素强制为100%：

$('#tab5').bind('click', function() {
    $('#container_div svg').width('100%');
});

…我的理智已经恢复。目前。
对于使用角度和定制组件的组件，请记住为主体元素定义css中的标注的
显示
（例如
块
或
柔性
）

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

html

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

否则，图表将在装载时溢出容器，只有在下一次浏览器回流时（例如，当您开始调整窗口大小时）才能获得正确的宽度。
我今天遇到了相同的问题-不是在移动设备上，而是在第一页上有一个小窗口
<chart (load)="saveInstance($event.context)">
...
</chart>

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

(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);

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

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

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

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


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

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

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