Highchart is not showing inside bootstrap div

问题

i am rendering highchart inside the bootstrap div. thing is it does not load. when i remove bootrap class its working fine. how i render chart in side the div with bootstrap class.

$('#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'
    }]
  }],
})

this 

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

回答1:

Here yo go with a solution https://jsfiddle.net/u3bdn4tt/

$('#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'
    }]
  }],
})

#container {
  height: 100vh;
}

<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>

My believe it was not working because the container height is not specified, so it was considering the height of the container as 1px & all the calculated height for the chart was zero.

I specified some height to the container & it's working.

回答2:

JSFiddle

HTML

1.Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your chart.

<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.A chart is initialized by adding the JavaScript tag,

<script> </script>,

anywhere in a webpage, containing the following code. The div from #1 is referenced in the constructor.

  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

回答3:

Try setting height in style attribute of div.

I was also facing same issue, setting height to 300px worked for me. I have prepared fiddle demo here. http://jsfiddle.net/yhkbovkj/34/ Here, to simulate if you remove width style then chart won't load.

<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>

来源：https://stackoverflow.com/questions/45854106/highchart-is-not-showing-inside-bootstrap-div