Question

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

highcharts modal

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

Answer 1

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

解决方案是捕获bootstrap模态事件并在shown.bs.modal事件的回调中更新Highcharts宽度：

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

见demo。我在这里使用visibility css属性，因此Highchart不会反弹。这不是理想的，但总比没有好。

Answer 2

我尝试了接受的解决方案，但就我而言，我没有选择使用html中已经存在的特定模块ID的选项，因此以下解决方案对我不起作用。

$('<modal-id>').on('shown.bs.modal', function() {
   chart.reflow();
});

我试图做的是，将EmodalJS组件中只有一个特定类的动态模式添加到html中。

我的解决方法是这样：

App.registerComponentFactory('my-chart', SplineChart.extend({
    setup: (function() {
      $('body')
      .off('shown.bs.modal', '.my-modal')
      .on('shown.bs.modal', '.my-modal', () => this.reflow());
}).on('init'),

因此，每次我的图表模块初始化时，它都会将事件处理程序绑定到模态。还有

.off('shown.bs.modal', '.my-modal')

每次触发模式时，也需要

part来解除绑定处理程序，否则，重熔功能仅在第一次尝试中成功运行。

这对于类似情况可能有用。

Answer 3

应用此

chart: {
 events: {
            load: function(chart) {
                 $timeout(function() {
                      chart.target.reflow();   
                 );
          }
      }};

Answer 4

对于引导程序3上具有模式的响应式图表，只需在加载页面上添加此行代码

$('#yourmodal').on('off.bs.modal', function() {
    $('#yourselector').css('visibility', 'hidden');
});
$('#yourmodal').on('shown.bs.modal', function() {
    $('#yourselector').css('visibility', 'initial');
    $('#yourselector').highcharts().reflow();
});

Answer 5

$('#J_report_graph').on('shown.bs.modal', function (event) {
                            $("#J_report_graph_container").highcharts({});
                        });

$("#J_report_graph").modal();

将按预期工作

Highcharts不适合Bootstrap 3模态体

5 个答案: