Twitter bootstrap 如何制作响应性海图？

我用Highcharts创建了一个条形图，并使用bootstrap将其存储在col-md-12列中。我设置了此图表的宽度，使其为100%，但其宽度甚至超过了col-md-12

这是我的密码：

<div class="col-md-12">
    <div id="kanwil-report-kepuasan" style="width: 100%; min-height: 330px; margin: 0 auto"></div>
</div>

---

在highcharts文档页面上签出此页面

但请引述：

自Highcharts 5.0以来，您可以创建与此基本相同的响应图表 您处理响应性网页的方式。一个顶级选项， 响应，存在于配置中

它允许您定义一组规则，例如，每个规则都有一个条件 maxWidth:500，以及应用于 常规图表选项的顶部。图表选项用作覆盖 到常规图表选项，该选项在规则应用时适用。对于 例如，以下规则将隐藏小于的图表的图例 500像素宽：

---

从屏幕截图上看，Highcharts图表似乎出现在第一次查看页面时可能不可见的选项卡中

Highcharts，以及Javascript和jQuery，如果首先隐藏对象，然后在页面加载后使其可见，则将对象呈现为正确的宽度和高度是一个挑战。Javascript等不能（可靠地）保存不可见对象的宽度和高度值，没有这些信息会干扰Highcharts代码的本地响应

为了让图表以正确的尺寸显示，我建议在选项卡上添加一个单击事件，这样，每当显示图表的选项卡显示时，它都会捕获“kanwil report kepuasan”div的当前大小（宽度和高度），然后在此时呈现图表（不仅仅是在加载页面之后）

以下是大致的工作原理：

$("#TabThatHasChart").on('click',function(e){

    /* OPTIONAL: some variables you can use in your chart options for custom sizing */
    var chartWidth = $("#kanwil-report-kepuasan").width();
    var chartHeight = $("#kanwil-report-kepuasan").height();

    /* draw the chart once the tab has been clicked and it is now visible */
    $('#kanwil-report-kepuasan').highcharts({
        /* your chart options go here */
    });

    e.stopPropagation();

});

我希望这些信息对你有帮助

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        enabled: false
      }
    }
  }]
}

$("#TabThatHasChart").on('click',function(e){

    /* OPTIONAL: some variables you can use in your chart options for custom sizing */
    var chartWidth = $("#kanwil-report-kepuasan").width();
    var chartHeight = $("#kanwil-report-kepuasan").height();

    /* draw the chart once the tab has been clicked and it is now visible */
    $('#kanwil-report-kepuasan').highcharts({
        /* your chart options go here */
    });

    e.stopPropagation();

});