Highcharts 不适合 Bootstrap 3 模态主体

reflow

关注

发信

关注(28)粉丝(399)

Highcharts 不适合 Bootstrap 3 模态主体

本文介绍了Highcharts 不适合 Bootstrap 3 模态主体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用 Bootstrap 3 模态拟合和制作高图图表?似乎图表独立于页面的css，但我不确定.

<div class="modalfade" 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">关闭</span></button><h4 class="modal-title" id="myModalLabel">分类分析</h4>

<div class="modal-body"><div class="panel panel-default"><div class="panel-body"><div id="容器"></div>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

$(function () {$('#container').highcharts({图表: {类型:'列'},标题: {text: '堆积柱形图'},x轴:{类别:['Lazada'、'竞争对手 1'、'竞争对手 2'、'竞争对手 3'、'竞争对手 4']},y轴:{分钟:0，标题: {文字:'价格范围'}},工具提示:{pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>({point.percentage:.0f}%)<br/>',分享:真实},绘图选项:{柱子: {堆叠:'百分比'}},系列: [{名称:'100 - 300',数据:[5, 3, 4, 7, 2]}, {名称:'301 - 500',数据:[2, 2, 3, 2, 1]}, {名称:'501 - 1000',数据:[3, 4, 4, 2, 5]}, {名称:'1001 - 3000',数据:[3, 4, 4, 2, 5]}, {名称:'3001 - 5000',数据:[3, 4, 4, 2, 5]}, {名称:'5001 - 10000',数据:[3, 4, 4, 2, 5]}]});});

这是一个 jsfiddle.

回流修复:

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

解决方案

这是一个常见问题与highcharts.我能得到的最好建议是在显示 Highcharts 后使用 window.resize()，但实际上 Highcharts 中有一个 API 函数，称为 reflow，这也有帮助.

解决方案是在 shown.bs.modal 事件:

var chart = $('#container').highcharts();$('#chart-modal').on('show.bs.modal', function() {$('#container').css('可见性', '隐藏');});$('#chart-modal').on('shown.bs.modal', function() {$('#container').css('visibility', 'initial');图表回流()；});

参见演示.我在这里使用 visibility css 属性，所以 Highchart 不会反弹.这并不理想，但总比没有好.

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

Here is a jsfiddle.

Reflow fix:

$('#reflow-chart').click(function () {
    $('#first-chart').highcharts().reflow();
    $('#second-chart').highcharts().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.

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

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

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

08-18 12:06