Question

我在bootstrap div中渲染高图。事情是它没有加载。当我删除bootrap类其工作正常。我如何使用bootstrap类在div中渲染图表。

＆＃13;

$('#container').highcharts({
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Container Utilization'
  },
  xAxis: {
    type: 'category'
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },

  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
      }
    }
  },

  series: [{
    name: 'Utilization',
    colorByPoint: true,
    data: [{
      name: 'Utilized',
      y: 5,
      drilldown: 'u'
    }, {
      name: 'Unutilized',
      y: 4,
      drilldown: 'un'
    }]
  }],
})

＆＃13;

this 

<div id="container" class="col-md-6"></div>

＆＃13;

Answer 1

在这里，您可以使用解决方案https://jsfiddle.net/u3bdn4tt/

＆＃13;

$('#container').highcharts({
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Container Utilization'
  },
  xAxis: {
    type: 'category'
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },

  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
      }
    }
  },

  series: [{
    name: 'Utilization',
    colorByPoint: true,
    data: [{
      name: 'Utilized',
      y: 5,
      drilldown: 'u'
    }, {
      name: 'Unutilized',
      y: 4,
      drilldown: 'un'
    }]
  }],
})

＆＃13;

#container {
  height: 100vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/css/highcharts.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6" id="container"></div>
  </div>
</div>

＆＃13;

我相信它不起作用，因为未指定container高度，因此它将container的高度视为 1px ＆amp;图表的所有计算高度均为零。

我为container＆amp;它在工作。

Answer 2

JSFiddle

HTML

1.在您的网页中添加div。给它一个id并设置一个特定的宽度和高度这将是图表的宽度和高度。

<div id="container" class="col-md-6" style="width:100%; height:400px;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

JS

2.通过添加JavaScript标记

来初始化图表

<script> </script>，

网页中的任意位置，包含以下代码。＃1中的div在构造函数中引用。

  Highcharts.chart('container', {
            chart: {
              type: 'pie'
            },
            title: {
              text: 'Container Utilization'
            },
            xAxis: {
              type: 'category'
            },
            credits: {
              enabled: false
            },
            legend: {
              enabled: false
            },

            plotOptions: {
              series: {
                borderWidth: 0,
                dataLabels: {
                  enabled: true,
                }
              }
            },

            series: [{
              name: 'Utilization',
              colorByPoint: true,
              data: [{
                name: 'Utilized',
                y: 5,
                drilldown: 'u'
              }, {
                name: 'Unutilized',
                y: 4,
                drilldown: 'un'
              }]
            }],
          })

HighCharts Docs

Answer 3

尝试在div的style属性中设置高度。

我也面临同样的问题，将高度设置为300px对我有用。我在这里准备了小提琴演示。 http://jsfiddle.net/yhkbovkj/34/ 在这里，要模拟是否删除宽度样式，则不会加载图表。

<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css_and_js/twitter-bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<div id="container" class="col-md-6" style="height: 300px"></div>

<script src="jquery-1.x-git.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="css_and_js/twitter-bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="css_and_js/highchart/highcharts.js" type="text/javascript"></script>


<script>
    $(document).ready(function () {

        $('#container').highcharts({
            chart: {
                type: 'pie',
                renderTo: 'container',
                width: 700
            },
            title: {
                text: 'Container Utilization'
            },
            xAxis: {
                type: 'category'
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                    name: 'Utilization',
                    colorByPoint: true,
                    data: [{
                            name: 'Utilized',
                            y: 5,
                            drilldown: 'u'
                        }, {
                            name: 'Unutilized',
                            y: 4,
                            drilldown: 'un'
                        }]
                }]
        });
    });
</script>

Highchart没有显示在bootstrap div中

3 个答案: