1.HTML定義：

                    <!--chart container-->
                    <div id=‘chart_div‘ style="overflow-x:auto;border:1px solid #a2a2a2;">
                        <div id="chart_container" style="min-width:93%;width:<?php echo $chart_div_width;?>;height:500px;min-width:93%;margin:15px auto 10px auto;"></div>
                    </div>

    2. JS動態控制‘chart_container’ div的高度, 註意有的時候需要指定一個最小的高度，當js檢測頁面的高度小於這個設置的默認最小高度的時候用最小高度

                    <!--改變div高度,動態-->
                    <script type="text/javascript">
                        $(document).ready(function() {
                            //set chart container height
                            var chart_height = $(window).height()-$("#chart_div").prop("offsetTop")-25;
                            $("#chart_div").css("height", chart_height); //有時候不需要這個
                            $("#chart_container").css("height", chart_height-20);
                        });
                    </script>

    3. 通過‘chart_container‘的 min-width和width屬性來控制‘chart_container‘的寬度， 給外層的‘chart_div‘設置overflow-x:auto這樣就能達到理想的寬度，在PHP中可以計算要顯示的柱狀圖的個數

                $chart_div_width = count($all_time_array)*25."px";//每個柱狀圖的最小寬度為25px，這個數值請根據項目的實際情況來定
 

分享展示高度和寬度樣式優化問題：