Highcharts图表宽度动态调整大小

时间：2015-10-12 11:02:11

标签： javascript jquery css twitter-bootstrap highcharts

我正在使用highcharts和bootstrap Carousel。

我想要实现的是在Carousel中滑动图表。它工作得很好第一张图表只占用了Carousel的全宽。其他滑块只占用了旋转木马宽度的一半。

如何使宽度达到100％。您可以通过滑动到2,3,4 Carousel进行检查，看看只有一半的Carousel被图表所覆盖。

图像：

enter image description here

我的代码：

＆＃13;
＆＃13; 
$(function () {
    $('#container1').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});


$(function () {
    $('#container2').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{
            name: "Winter 2012-2013",
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [
                [Date.UTC(1970, 9, 21), 0],
                [Date.UTC(1970, 10, 4), 0.28],
                [Date.UTC(1970, 10, 9), 0.25],
                [Date.UTC(1970, 10, 27), 0.2],
                [Date.UTC(1970, 11, 2), 0.28],
                [Date.UTC(1970, 11, 26), 0.28],
                [Date.UTC(1970, 11, 29), 0.47],
                [Date.UTC(1971, 0, 11), 0.79],
                [Date.UTC(1971, 0, 26), 0.72],
                [Date.UTC(1971, 1, 3), 1.02],
                [Date.UTC(1971, 1, 11), 1.12],
                [Date.UTC(1971, 1, 25), 1.2],
                [Date.UTC(1971, 2, 11), 1.18],
                [Date.UTC(1971, 3, 11), 1.19],
                [Date.UTC(1971, 4, 1), 1.85],
                [Date.UTC(1971, 4, 5), 2.22],
                [Date.UTC(1971, 4, 19), 1.15],
                [Date.UTC(1971, 5, 3), 0]
            ]
        }, {
            name: "Winter 2013-2014",
            data: [
                [Date.UTC(1970, 9, 29), 0],
                [Date.UTC(1970, 10, 9), 0.4],
                [Date.UTC(1970, 11, 1), 0.25],
                [Date.UTC(1971, 0, 1), 1.66],
                [Date.UTC(1971, 0, 10), 1.8],
                [Date.UTC(1971, 1, 19), 1.76],
                [Date.UTC(1971, 2, 25), 2.62],
                [Date.UTC(1971, 3, 19), 2.41],
                [Date.UTC(1971, 3, 30), 2.05],
                [Date.UTC(1971, 4, 14), 1.7],
                [Date.UTC(1971, 4, 24), 1.1],
                [Date.UTC(1971, 5, 10), 0]
            ]
        }, {
            name: "Winter 2014-2015",
            data: [
                [Date.UTC(1970, 10, 25), 0],
                [Date.UTC(1970, 11, 6), 0.25],
                [Date.UTC(1970, 11, 20), 1.41],
                [Date.UTC(1970, 11, 25), 1.64],
                [Date.UTC(1971, 0, 4), 1.6],
                [Date.UTC(1971, 0, 17), 2.55],
                [Date.UTC(1971, 0, 24), 2.62],
                [Date.UTC(1971, 1, 4), 2.5],
                [Date.UTC(1971, 1, 14), 2.42],
                [Date.UTC(1971, 2, 6), 2.74],
                [Date.UTC(1971, 2, 14), 2.62],
                [Date.UTC(1971, 2, 24), 2.6],
                [Date.UTC(1971, 3, 2), 2.81],
                [Date.UTC(1971, 3, 12), 2.63],
                [Date.UTC(1971, 3, 28), 2.77],
                [Date.UTC(1971, 4, 5), 2.68],
                [Date.UTC(1971, 4, 10), 2.56],
                [Date.UTC(1971, 4, 15), 2.39],
                [Date.UTC(1971, 4, 20), 2.3],
                [Date.UTC(1971, 5, 5), 2],
                [Date.UTC(1971, 5, 10), 1.85],
                [Date.UTC(1971, 5, 15), 1.49],
                [Date.UTC(1971, 5, 23), 1.08]
            ]
        }]
    });
});

$(function () {
    $('#container3').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
        }, {
            name: 'USSR/Russia',
            data: [null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000]
        }]
    });
});


$(function () {
    $('#container4').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});
＆＃13; 
.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
＆＃13; 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="container">

  <br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div id="container1" style="height: 400px; margin: 0 auto"></div>
      </div>

      <div class="item">
        <div id="container2" style="height: 400px; margin: 0 auto"></div>
      </div>
    
      <div class="item">
        <div id="container3" style="height: 400px; margin: 0 auto"></div>
      </div>

      <div class="item">
        <div id="container4" style="height: 400px; margin: 0 auto"></div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
  </div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

添加CSS 

.highcharts-container{
    width:100% !important;
}

答案 1 :(得分：1)

在图表选项

中使用此功能 
chart:{
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0,
        spacingBottom: 0,
        margin:0
}

还有一件事，你要设置身高：400px;在你的容器中。设置宽度100％，highcharts默认设置为600宽度。

答案 2 :(得分：1)

似乎旋转木马阻止高图获得正确尺寸的容器。您可以在旋转木马的滑动事件上强制reflow()。这很丑陋（你看到图表正在调整大小，因为在幻灯片出现之前你无法重排）但是它有效：

$("#myCarousel").on('slid.bs.carousel', function () {
    $('#container1').highcharts().reflow();
    $('#container2').highcharts().reflow();
    $('#container3').highcharts().reflow();
    $('#container4').highcharts().reflow();
});

每次有幻灯片时都会调用此代码，因此它不是最佳的，您是否尝试在div上添加宽度？

答案 3 :(得分：1)

试试这个 - 

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <div id="container1" style="height: 400px; width:72%; margin: 0 auto"></div>
  </div>

  <div class="item">
    <div id="container2" style="height: 400px; width:72%; margin: 0 auto"></div>
  </div>

  <div class="item">
    <div id="container3" style="height: 400px; width:72%; margin: 0 auto"></div>
  </div>

  <div class="item">
    <div id="container4" style="height: 400px; width:72%; margin: 0 auto"></div>
  </div>
</div>

为容器div指定宽度。我希望它会对你有所帮助。

答案 4 :(得分：1)

每次轮播完成幻灯片过渡时，触发事件窗口调整大小

$("#myCarousel").on('slid.bs.carousel', function () {
    $(window).trigger("resize");
 });

JSFiddle demo 

$(function () {
      /// the new code
      $("#myCarousel").on('slid.bs.carousel', function () {
          $(window).trigger("resize");
      });

      $('#container1').highcharts({
          title: {
              text: 'Monthly Average Temperature',
              x: -20 //center
          },
          subtitle: {
              text: 'Source: WorldClimate.com',
              x: -20
          },
          xAxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
          yAxis: {
              title: {
                  text: 'Temperature (°C)'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              valueSuffix: '°C'
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
          },
          series: [{
              name: 'Tokyo',
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
              name: 'New York',
              data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
              name: 'Berlin',
              data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
              name: 'London',
              data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]
      });
  });


  $(function () {
      $('#container2').highcharts({
          chart: {
              type: 'spline'
          },
          title: {
              text: 'Snow depth at Vikjafjellet, Norway'
          },
          subtitle: {
              text: 'Irregular time data in Highcharts JS'
          },
          xAxis: {
              type: 'datetime',
              dateTimeLabelFormats: { // don't display the dummy year
                  month: '%e. %b',
                  year: '%b'
              },
              title: {
                  text: 'Date'
              }
          },
          yAxis: {
              title: {
                  text: 'Snow depth (m)'
              },
              min: 0
          },
          tooltip: {
              headerFormat: '<b>{series.name}</b><br>',
              pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
          },

          plotOptions: {
              spline: {
                  marker: {
                      enabled: true
                  }
              }
          },

          series: [{
              name: "Winter 2012-2013",
              // Define the data points. All series have a dummy year
              // of 1970/71 in order to be compared on the same x axis. Note
              // that in JavaScript, months start at 0 for January, 1 for February etc.
              data: [
                  [Date.UTC(1970, 9, 21), 0],
                  [Date.UTC(1970, 10, 4), 0.28],
                  [Date.UTC(1970, 10, 9), 0.25],
                  [Date.UTC(1970, 10, 27), 0.2],
                  [Date.UTC(1970, 11, 2), 0.28],
                  [Date.UTC(1970, 11, 26), 0.28],
                  [Date.UTC(1970, 11, 29), 0.47],
                  [Date.UTC(1971, 0, 11), 0.79],
                  [Date.UTC(1971, 0, 26), 0.72],
                  [Date.UTC(1971, 1, 3), 1.02],
                  [Date.UTC(1971, 1, 11), 1.12],
                  [Date.UTC(1971, 1, 25), 1.2],
                  [Date.UTC(1971, 2, 11), 1.18],
                  [Date.UTC(1971, 3, 11), 1.19],
                  [Date.UTC(1971, 4, 1), 1.85],
                  [Date.UTC(1971, 4, 5), 2.22],
                  [Date.UTC(1971, 4, 19), 1.15],
                  [Date.UTC(1971, 5, 3), 0]
              ]
          }, {
              name: "Winter 2013-2014",
              data: [
                  [Date.UTC(1970, 9, 29), 0],
                  [Date.UTC(1970, 10, 9), 0.4],
                  [Date.UTC(1970, 11, 1), 0.25],
                  [Date.UTC(1971, 0, 1), 1.66],
                  [Date.UTC(1971, 0, 10), 1.8],
                  [Date.UTC(1971, 1, 19), 1.76],
                  [Date.UTC(1971, 2, 25), 2.62],
                  [Date.UTC(1971, 3, 19), 2.41],
                  [Date.UTC(1971, 3, 30), 2.05],
                  [Date.UTC(1971, 4, 14), 1.7],
                  [Date.UTC(1971, 4, 24), 1.1],
                  [Date.UTC(1971, 5, 10), 0]
              ]
          }, {
              name: "Winter 2014-2015",
              data: [
                  [Date.UTC(1970, 10, 25), 0],
                  [Date.UTC(1970, 11, 6), 0.25],
                  [Date.UTC(1970, 11, 20), 1.41],
                  [Date.UTC(1970, 11, 25), 1.64],
                  [Date.UTC(1971, 0, 4), 1.6],
                  [Date.UTC(1971, 0, 17), 2.55],
                  [Date.UTC(1971, 0, 24), 2.62],
                  [Date.UTC(1971, 1, 4), 2.5],
                  [Date.UTC(1971, 1, 14), 2.42],
                  [Date.UTC(1971, 2, 6), 2.74],
                  [Date.UTC(1971, 2, 14), 2.62],
                  [Date.UTC(1971, 2, 24), 2.6],
                  [Date.UTC(1971, 3, 2), 2.81],
                  [Date.UTC(1971, 3, 12), 2.63],
                  [Date.UTC(1971, 3, 28), 2.77],
                  [Date.UTC(1971, 4, 5), 2.68],
                  [Date.UTC(1971, 4, 10), 2.56],
                  [Date.UTC(1971, 4, 15), 2.39],
                  [Date.UTC(1971, 4, 20), 2.3],
                  [Date.UTC(1971, 5, 5), 2],
                  [Date.UTC(1971, 5, 10), 1.85],
                  [Date.UTC(1971, 5, 15), 1.49],
                  [Date.UTC(1971, 5, 23), 1.08]
              ]
          }]
      });
  });

  $(function () {
      $('#container3').highcharts({
          chart: {
              type: 'area'
          },
          title: {
              text: 'US and USSR nuclear stockpiles'
          },
          subtitle: {
              text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                  'thebulletin.metapress.com</a>'
          },
          xAxis: {
              allowDecimals: false,
              labels: {
                  formatter: function () {
                      return this.value; // clean, unformatted number for year
                  }
              }
          },
          yAxis: {
              title: {
                  text: 'Nuclear weapon states'
              },
              labels: {
                  formatter: function () {
                      return this.value / 1000 + 'k';
                  }
              }
          },
          tooltip: {
              pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
          },
          plotOptions: {
              area: {
                  pointStart: 1940,
                  marker: {
                      enabled: false,
                      symbol: 'circle',
                      radius: 2,
                      states: {
                          hover: {
                              enabled: true
                          }
                      }
                  }
              }
          },
          series: [{
              name: 'USA',
              data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
              1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
              27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
              26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
              24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
              22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
              10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
          }, {
              name: 'USSR/Russia',
              data: [null, null, null, null, null, null, null, null, null, null,
              5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
              4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
              15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
              33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
              35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
              21000, 20000, 19000, 18000, 18000, 17000, 16000]
          }]
      });
  });


  $(function () {
      $('#container4').highcharts({

          chart: {
              type: 'column'
          },

          title: {
              text: 'Total fruit consumtion, grouped by gender'
          },

          xAxis: {
              categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
          },

          yAxis: {
              allowDecimals: false,
              min: 0,
              title: {
                  text: 'Number of fruits'
              }
          },

          tooltip: {
              formatter: function () {
                  return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                      'Total: ' + this.point.stackTotal;
              }
          },

          plotOptions: {
              column: {
                  stacking: 'normal'
              }
          },

          series: [{
              name: 'John',
              data: [5, 3, 4, 7, 2],
              stack: 'male'
          }, {
              name: 'Joe',
              data: [3, 4, 4, 2, 5],
              stack: 'male'
          }, {
              name: 'Jane',
              data: [2, 5, 6, 2, 1],
              stack: 'female'
          }, {
              name: 'Janet',
              data: [3, 0, 4, 4, 3],
              stack: 'female'
          }]
      });
  });
.carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
<div class="container">

  <br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div id="container1" style="height: 400px; margin: 0 auto"></div>
      </div>

      <div class="item">
        <div id="container2" style="height: 400px; margin: 0 auto"></div>
      </div>
    
      <div class="item">
        <div id="container3" style="height: 400px; margin: 0 auto"></div>
      </div>

      <div class="item">
        <div id="container4" style="height: 400px; margin: 0 auto"></div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  </div>

答案 5 :(得分：1)

尝试使用以下css 

#highcharts-4, #highcharts-8,#highcharts-12{
width:100% !important;
}
相关问题
最新问题