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 &它的工作。