36

我正在使用带有 jQ​​uery Mobile 的 Highcharts。

我在 jQMdata-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 的宽度，但是当我调整浏览器的大小时，它会捕捉到适当的宽度。

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

我已经查看了有关堆栈溢出的类似帖子，但似乎没有一个解决方案有效。

更新

  1. 我发现问题在于<rect>Highcharts 动态生成的标签在页面加载时占用了浏览器窗口的整个宽度，而根本没有从容器 div 宽度中获取它。这是我检查时生成的html：

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

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

4

21 回答 21

45

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

于 2015-11-04T15:44:43.607 回答
33

这就像魔术一样

放入你的css文件如下

.highcharts-container {
    width:100% !important;
    height:100% !important;
}
于 2014-07-23T22:07:43.570 回答
13

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

于 2015-02-17T17:09:23.827 回答
6

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

chart: {
            type: 'line',
            width: 835
        },
于 2014-04-23T09:08:44.413 回答
4

在准备好的文档中定义highcharts：

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

和脚本：

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

希望它有效;）

于 2016-10-10T19:40:07.470 回答
3

我在将它给出的高图表居中时遇到了类似的问题。对于某些分辨率，它会正确居中和调整大小，但不是全部。如果没有，我的症状与您在此处描述的完全相同。

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

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

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

应该解决您的问题。假设您的 div "hg=graph" 只有高图。

于 2013-08-14T19:18:06.753 回答
3

对于那些使用角度和定制组件的人，请记住display在 css 中为宿主元素定义尺寸（例如block或flex）。

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

html

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

ts

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

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

于 2017-03-29T21:23:57.580 回答
1

最好的方法是在渲染事件函数文档中调用chart.reflow ；

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

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

#chartContainter {
  min-width: 0;
  overflow: hidden;
  }
于 2018-10-07T00:07:32.750 回答
1

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

创建图表时，需要确定创建 SVG 的维度。 由于图表是隐藏的，因此无法正确获取尺寸，因此代码会克隆图表容器，将其放置在屏幕外并将其附加到正文中，以便确定高度/宽度。

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

图表第一次渲染后，屏幕上的尺寸是已知的，并且不调用克隆函数。这意味着任何窗口调整大小或重新加载图表数据都会导致图表大小正确。

我通过覆盖cloneRenderTo克隆 div 以获取尺寸的 Highcharts 函数解决了这个初始加载问题：

(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 脚本后加载。

于 2017-05-08T15:06:52.903 回答
0

尝试将 highchart 生成封装在 pageshow 事件中

$(document).on("pageshow", "#hg_graph", function() {...});
于 2013-12-05T15:30:20.083 回答
0

我也遇到过这个问题，并且 .highcharts-container css 解决方案对我不起作用。我设法通过将 ng 类条件（为容器 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 首先以未定义的宽度呈现？希望这对某人有所帮助。

于 2016-06-07T01:54:14.477 回答
0

这可能是自 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

于 2019-06-04T19:53:14.423 回答
0

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

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

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

和风格

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

.chart-wrapper > div:first-child{
  overflow: visible !important;
}
于 2021-04-29T19:37:21.993 回答
0

我在我的应用程序中也有同样的问题，我使用 angular 并且我也使用了 ngCloak 指令，我已经删除了它，因为我不需要它

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

于 2016-07-21T05:16:19.823 回答
0

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

尝试删除您的 javascript 标签上的 defer：

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

或者将我的样式表链接移到更高的头部似乎也可以解决它，但它是一个不太可靠的解决方案..

于 2019-02-18T15:16:54.217 回答
0

我通过确保包含的 UI 元素在图表之前呈现，从而解决了这个问题（就我而言） ，从而允许 Highcharts 计算正确的宽度。

例如：

前：

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

后：

var renderChart = function(){
...
};
setTimeout(renderChart, 0);
于 2016-02-24T12:39:32.353 回答
0

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

如果发生这种情况，高度超过预期高度：

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

最后一个发生在我破坏图表并创建新图表时......新的图表带有额外的宽度。

于 2016-08-17T13:33:57.383 回答
0

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

在我的情况下，我有一个图表，它根据 min 或 max 更新系列颜色。更新点后，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();

希望这对像我一样有同样问题的人有所帮助。:)

于 2016-10-04T09:22:12.277 回答
-1

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

classname{min-height:450px;width: 100%;}
于 2018-12-28T09:51:06.650 回答
-1

我为此苦苦挣扎了太久，并找到了适合我的解决方案。我的设置的一些背景知识：

  1. highcharts 图表加载在我网站上的一个选项卡上，登录该网站时看不到该选项卡。
  2. 切换到该选项卡时，图表完全在 div 之外。

因此，我将一个唯一 ID 附加到该特定选项卡，我们将调用它tab5，然后绑定一个单击函数，该函数<svg>使用 jQuery 强制 - 这是重要部分 - 容器 div 中的元素为 100%：

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

...我的理智已经恢复。暂时。

于 2017-03-08T17:00:15.310 回答
-1

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

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

并在 html 集中overflow:auto

<div id="container" style="**width:100%;overflow:auto**;" ></div>
于 2016-10-16T06:10:19.360 回答