相关疑难解决方法(0)

我想要一个使用浏览器窗口调整大小的图表,但问题是高度固定为400px.这个JSFiddle示例有同样的问题.

我怎样才能做到这一点？我尝试使用chart.events.redraw事件处理程序来调整图表的大小(使用.setSize),但我猜它会启动一个永无止境的循环(fire事件处理程序,它调用setSize,它会触发另一个事件处理程序等).

我目前有一个3个标签页.每个选项卡都是display: hidden未选中时设置的div .在这些选项卡中,我有一个使用Susy(罗盘插件)创建的网格系统.每个标签页还有一组Highcharts.当我加载页面时,根据URl中的哪个选项卡,加载其中一个选项卡.所有的图表看起来都很好,但是当我切换到另一个标签时,一些图表在他们的div中不正确.如果我只是重新调整窗口大小,则会重新计算图表,然后它们完全匹配.或者,如果我重新加载相同的选项卡,图表也适合.当我进行标签切换时,我可以调用一个能够调整页面上所有图表大小的功能吗？

它看起来像这样:

它应该是这样的:

编辑:似乎这不是一个与highcharts直接相关的问题,例如我的谷歌地图看起来像这样:

但是当我调整窗口大小时,它会正确调整:

当切换选项卡时,我可以通过JS中的函数调用来刷新/调整我的网格吗？

如何使用Bootstrap 3模态拟合并制作高图表图表？看起来图表独立于页面的CSS,但我不确定.

<div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Assortment Analysis</h4>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-body">
            <div id="container"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Lazada', 'Competitor 1', 'Competitor 2', 'Competitor 3', 'Competitor 4']
        },
        yAxis: …

调整容器大小时,我有两个问题用于图表渲染.

首先,如何在调整容器大小时正确呈现图表.

即最大化/恢复问题,在它的第一次渲染它工作正常,但是当我恢复窗口的大小时,图表开始叠加为其先前的大小.从下面的图片可以看出:

我知道如果你设置一个调整大小处理程序(并等待一小段时间),只要调整窗口大小,刷新图表,就可以解决问题.我在想是否有其他方法让图表流动到正确的大小,而不是每次刷新图表.

的第二件事是:如果制图区域是一个<div>容器,容器的尺寸将与调整大小酒吧改变.我使用以下代码来调整窗口大小.但它不适用于移动的调整大小栏.

$(window).resize(function () {
        setTimeout(function () {
            createChart(chartData);
        }, 300);
    });

注意:网格组件在任何情况下都能正常工作,只是图表我总是遇到麻烦.我正在使用HighCharts,kendoUI网格,它们都在jQueryUI portlet中呈现.

任何评论赞赏!这个问题花了我很长时间..

更新:由于我认为我对该问题的解释不够清楚,我添加了JSFiddle示例以便更好地理解.基本上我想要两件事:1.当窗口调整大小时,重新调整图表的大小以适合其容器; 2.当调整大小条移动时,重新调整图表的大小以适合其容器.

我在本例中使用插件highcharts进行图表处理,jQuery UI Layout用于布局管理.对于我正在使用的其他一些插件,请参考这里,我不确定他们是否有冲突.

谢谢!