Highcharts将不适合Bootstrap 3模态体 [英] Highcharts won't fit in Bootstrap 3 modal body

问题描述

我如何适应和使一个highcharts图表响应与Bootstrap 3模态？看来，图表是独立于页面的CSS，但我不确定。

How do I fit and make a highcharts chart responsive with Bootstrap 3 modals? It seems that the chart is independent from the css of the page, but I'm not sure.

<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: {
            min: 0,
            title: {
                text: 'Price Range'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
        series: [{
            name: '100 - 300',
            data: [5, 3, 4, 7, 2]
        }, {
            name: '301 - 500',
            data: [2, 2, 3, 2, 1]
        }, {
            name: '501 - 1000',
            data: [3, 4, 4, 2, 5]
        }, {
            name: '1001 - 3000',
            data: [3, 4, 4, 2, 5]
        }, {
            name: '3001 - 5000',
            data: [3, 4, 4, 2, 5]
        }, {
            name: '5001 - 10000',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

这里是 jsfiddle 。

回流修复：

$('#reflow-chart').click(function () {
    $('#first-chart').highcharts().reflow();
    $('#second-chart').highcharts().reflow();
});

推荐答案

这是一个common 与highcharts有关的问题。我可以得到的最好的建议是在显示Highcharts之后使用 window.resize（），但实际上在Highcharts中有一个API函数，名为 reflow ，这也可以帮助。

This is a common issue with highcharts. The best advice I could get is to use window.resize() after Highcharts is shown, but actually there is an API function in Highcharts called reflow, that could also help.

解决方案是捕获引导模式事件，并在回显中更新您的Highcharts宽度。 bs.modal 事件：

The solution is to catch bootstrap modal events and update your Highcharts width in callback of shown.bs.modal event:

var chart = $('#container').highcharts();
$('#chart-modal').on('show.bs.modal', function() {
    $('#container').css('visibility', 'hidden');
});
$('#chart-modal').on('shown.bs.modal', function() {
    $('#container').css('visibility', 'initial');
    chart.reflow();
});

请参阅演示。我使用 visibility css属性，因此Highchart不会弹回。这不是理想的，但比没有什么更好。

See demo. I use visibility css property here so Highchart won't bounce. This is not ideal, but better than nothing.

这篇关于Highcharts将不适合Bootstrap 3模态体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！