highcharts 如何从高响应图表制作饼图

qvsjd97n 于 2022-11-10 发布在 Highcharts

关注(0)|答案(2)|浏览(243)

我一直在尝试，因为一些天来，使一个饼图从highcharts响应。我正在做一个中等大小的项目，有时很容易失去概述。
我已经查过了http://www.angulartutorial.net/2014/03/responsive-highchart.html但未成功。

**问题：**当宽度为1920 px时， highcharts 看起来不错。当宽度为900 px时，饼图的描述（系列-〉数据）在浏览器之外，无法阅读，而且，饼图对我来说太小了。
**问题：**我如何避免这种行为？我想要一个更大的饼，并且能够阅读（系列-〉数据）。

我提供了以下代码：
我的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

更新：

highcharts

来源：https://stackoverflow.com/questions/32118711/how-to-make-a-pie-chart-from-highcharts-responsive

2条答案

按热度按时间

sczxawaw1#

每次图表更改大小时，都会触发图表的重绘事件。您可以在该事件中检查图表的宽度，并为系列调用其他更新，因为如果您将标签的文本更改为带有<br>标记的文本，则饼图看起来会很合适。如果您的问题更复杂，解决方案仍将类似-检查大小并更新图表。
更改点名称的示例：http://jsfiddle.net/j86jkfvj/114/
宽度〈900 px时系列更新的示例：http://jsfiddle.net/dhwzw8qg/

赞(0）回复(0）举报 2022-11-10

uqjltbpv2#

下面是我发现的一个基于页面的resize事件重绘饼图的例子。我已经使用过了，效果很好：
jsfiddle.net/4mo2qf79/12
于飞：

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

JS：

$(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();

});

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 如何从高响应图表制作饼图

2条答案

相关问题

热门标签

最新问答