1

How can I combine a responsive highcharts chart with Bootstrap 3 modals? Can anybody help me !Thank you so much!

enter image description here

My JS code is here:

$('#highchart_hongli').highcharts('StockChart',{

                                        title:{
                                        text:'收益走势图'
                                        },
                                        xAxis:{
                                        title:{
                                        text:'入市时间'
                                        },

                                        },

                                        tooltip: {
                                        xDateFormat: '%Y-%m-%d',
                                        shared: true,
                                        },

                                        rangeSelector : {
                                        selected : 8
                                        },

                                        series : [{
                                                  name : '净值',
                                                  data : {!! json_encode($hongli_data)!!},
                                                  tooltip: {
                                                  valueDecimals: 2
                                                  }
                                                  }]
                                        });

Here is my html code:

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">

        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <div id="highcharts_hongli"></div>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> 关闭页面</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
René Wolferink
  • 3,558
  • 2
  • 29
  • 43
IDTIMW
  • 217
  • 2
  • 14
  • could you add the HTML Source, too? – Martin Schneider Dec 10 '15 at 07:40
  • @MartinSchneider I have upload my html code. Thanks you very much for help me. – IDTIMW Dec 10 '15 at 07:47
  • hmm can't find anything clearly suspicious. you have to make sure that the div with the id highcharts_hongli takes up the space that you want it to. Highcharts should do the rest and display itself in whatever this div takes up. I recommend examining the measures of the div via the element inspector of your browser of choice and see if it has the desired properties. – Martin Schneider Dec 10 '15 at 07:59
  • Is your modal hidden when you create the chart? In that case, browser can not calculate width+height for the container (it's 0px x 0px), so Highcharts render the chart with default width and height. See similar issue: http://stackoverflow.com/questions/25398127/highcharts-wont-fit-in-bootstrap-3-modal-body – Paweł Fus Dec 10 '15 at 11:17
  • I accept your advise, and I change some part. But the charts doesn't display. This is my Js code : `var chart = $('#highchart_hongli').highcharts(); $('#portfolioModal1').on('show.bs.modal', function() { $('#highchart_hongli').css('visibility', 'hidden'); }); $('#portfolioModal1').on('shown.bs.modal', function() { $('#highchart_hongli').css('visibility', 'initial'); chart.reflow(); });` @PawełFus – IDTIMW Dec 11 '15 at 02:18
  • Try to call setSize on your chart, when is loaded. http://stackoverflow.com/questions/16838758/highcharts-graph-width-is-incorrect-when-scrollbar-is-present-in-bootstrap-flui – Sebastian Bochan Dec 11 '15 at 10:46

0 Answers0