几天以来，我一直在尝试从 highcharts 中制作一个响应式饼图。我正在从事一个中等规模的项目，有时很容易失去概览。

我已经检查过了：http://www.angulartutorial.net/2014/03/responsive-highchart.html http://www.angulartutorial.net/2014/03/responsive-highchart.html但没有成功。

Problem:当宽度为 1920px 时，高图看起来不错。 当它是900px时，饼图的描述（系列->数据）在浏览器之外，人们无法阅读它，而且，饼图对我来说太小了。

问题：我怎样才能避免这种行为？我想要一个更大的饼并且能够读取（系列->数据）。

我提供以下代码：

我的 HTML 代码是：

<div id="container-independency" >
  <div id="independency" >
    <div>Title plot</div>
    <div style="margin-left: 2.8%; margin-top:1%; font-size: 24px;">Bla blablabla blab bl<span class="autarkie" > </span> % blabla = <strong> <span class="autarkie" >
    </span> % blablabla blablabla</strong></div>
     <div id="highcharts_container"></div> 
  </div>
</div>

CSS 代码：

#container-independency{
    width: 90%;
    max-width: 1620px;
    background-color: #b8860b;
    clear: both;
    padding: 1%;
    display: none;
    box-sizing: border-box;
}

#independency{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 1%;
    background-color: #ffb6c1;
    box-sizing: border-box;
}

#highcharts_container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

}

高图表：

('#highcharts_container').highcharts({ 
          chart: { 
              plotBackgroundColor: null, 
              plotBorderWidth: null, 
              plotShadow: false, 
              type: 'pie' 
          },

          title:{
           text:''
          },

          credits: { 
            enabled: false 
           },

          navigation: {
            buttonOptions: {
                enabled: false
            }
          }, 

          tooltip: { 
              pointFormat: '<b>{point.percentage:.1f}%</b>' 
          }, 
          plotOptions: { 
              pie: { 
                  allowPointSelect: true, 
                  cursor: 'pointer', 
                  dataLabels: { 
                      enabled: true, 
                      format: '<b>{point.name}</b>: {point.percentage:.2f} %', 
                      style: { 
                          color: '#58585a',
                          fontFamily: 'klavika-web, sans-serif', fontSize: '12px'          
                      } 
                  } 
              } 
          }, 
          series: [{

              name: '',    
              data: [ 
                 ['Property1aaa/Property2aaa/Property3aaaaaa', independency], 
                 ['More blablabla blablabla', 100-independency],                
              ] 
          }]    
        });//highcharts_container

Update:

每次图表更改大小时都会触发图表的重绘事件。您可以在该事件中检查图表的宽度并调用系列的附加更新，因为如果您将标签的文本更改为<br>标签，那么馅饼似乎很合适。如果您的问题更复杂，解决方案仍然相似 - 检查尺寸并更新图表。

更改点名称的示例：http://jsfiddle.net/j86jkfvj/114/ http://jsfiddle.net/j86jkfvj/114/

宽度 http://jsfiddle.net/dhwzw8qg/