Highchart不顯示內部引導區div

Question

我在引導區div內渲染highchart。事情是它不加載。當我刪除bootrap類它的工作正常。我如何在引導類的div中渲染圖表。

$('#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>

Answer 1

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.A圖表通過將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 2

嘗試在DIV的風格屬性設置高度。

我也面臨同樣的問題，設置高度爲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> 

Answer 3

這裏喲去解決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>

我認爲這是行不通的，因爲沒有指定container高度，所以它正在考慮container的高度爲1px &圖表的所有計算高度爲零。

我指定了一些高度的container &它的工作。