Css 如何从highcharts创建饼图

几天以来，我一直在尝试用海图制作一个饼图。我正在做一个中等规模的项目，有时很容易失去概述

我已经检查过了：但是没有成功

问题：当宽度为1920像素时，highchart看起来不错。 当它是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>

高图：

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

（'highcharts\u container'）。highcharts（{
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
键入：“馅饼”
},
标题：{
文本：“”
},
学分：{
已启用：false
},
导航：{
按钮选项：{
已启用：false
}
}, 
工具提示：{
pointFormat:“{point.percentage:.1f}%”
}, 
打印选项：{
派：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：“{point.name}:{point.percentage:.2f}%”，
样式：{
颜色：“#585a”，
fontFamily:'klavika web，无衬线'，fontSize:'12px'
} 
} 
} 
}, 
系列：[{
名称：“”，
数据：[
['PropertyAAA/PropertyAAA/Property3aAAAA'，独立性]，
[‘更多的废话’，100个独立性]，
] 
}]    
});//高密度集装箱

更新：

---

每次图表更改大小时，都会触发图表的重画事件。您可以在该事件中检查图表的宽度，并调用附加的系列更新，因为如果您将标签的文本更改为带有

标记的文本，则饼图似乎很适合。如果您的问题更复杂，解决方案仍将类似-检查大小并更新图表

更改点名称的示例：

---

宽度为<900px时进行系列更新的示例：

以下是我发现的一个基于页面调整大小事件重新绘制饼图的示例。我使用过它，效果很好：

HTML:

JS:

$（函数（）{
$（“#容器”）。高图({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“响应调整大小”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：true
}
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：[
['Firefox'，45.0]，
[IE'，26.8]，
[Safari'，8.5]，
[Opera'，6.2]，
[“其他”，0.7]
]
}]
});
函数重绘图表（）{
var chart=$（“#容器”）.highcharts（）；
console.log（'redraw'）；
var w=$（“#容器”）.closest（“.wrapper”）.width（）
//setsize将触发图形重画
图表.设置大小（
w、 w*（3/4），假
);
}
$（窗口）。调整大小（重画图表）；
重画图表（）；
});

为什么显示：无；对于#集装箱独立性？图表不可见。答案为Thks。这正是我的问题：。调整浏览器大小时，饼图将隐藏。@webquestions饼图何时隐藏？如何重新创建问题，以及您期望图表的最终行为是什么？我添加了屏幕变小时的情况。当屏幕变小时，请注意隐藏标签。这是我的问题。我怎么能避免这种情况呢？我发现了这个，所以不能相信，但似乎是一个更好的答案，一个调整大小的事件触发了图表的重画：@NicoWesterdale是的，这看起来更好。你应该把它作为一个答案。如果您不想获得代码的荣誉，请链接您的源代码：）

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

<div class="wrapper">
    <div id="container" style="width:100%;"></div>
</div>

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
       },
        title: {
            text: 'Responsive Resize'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE',      26.8],
                ['Safari',  8.5],
                ['Opera',   6.2],
                ['Others',  0.7]
            ]
        }]
    });

    function redrawchart(){
        var chart = $('#container').highcharts();

        console.log('redraw');
        var w = $('#container').closest(".wrapper").width()
        // setsize will trigger the graph redraw 
        chart.setSize(       
            w,w * (3/4),false
        );
     }

    $(window).resize(redrawchart);
    redrawchart();

});