Как сделать круговую диаграмму из highcharts отзывчивых

Question

Я пытаюсь с некоторыми днями сделать круговую диаграмму с высокой скоростью. Я работаю над проектом среднего размера, и иногда легко потерять обзор.

Я уже проверил это: http://www.angulartutorial.net/2014/03/responsive-highchart.html, но не успел.

Проблема: Highchart выглядит хорошо, когда ширина составляет 1920 пикселей. Когда это 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:

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

Обновление:

Answer 1

Каждый раз, когда диаграмма изменения размера перерисовывать событие графика срабатывает. Вы можете проверить ширину диаграммы в этом событии и вызвать дополнительное обновление для серии, потому что, если вы измените текст меток на один с помощью тегов <br>, то пирог, кажется, хорошо подходит. В случае, если ваша проблема является более сложным решением, все равно будет похоже - проверьте размер и график обновления.

Пример с измененными названиями точек: http://jsfiddle.net/j86jkfvj/114/

Пример с обновлением серии, когда ширина < 900px: http://jsfiddle.net/dhwzw8qg/

Answer 2

Вот пример, который я нашел перерисовку пирог, основанные на изменения размера события страницы. Я использовал его и работает хорошо:

jsfiddle.net/4mo2qf79/12

HTML:

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

});