Highcharts에서 반응 형 타이틀을 만들려면 어떻게해야합니까?

Question

내 highcharts의 제목을 만들려고는 반응 차트를 도넛 - 여기 내 현재 jsFiddle입니다 : https://jsfiddle.net/klstack3/43Lqzznt/2/

HTML

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

CSS

.highcharts-title { 
font-weight: bold; 

자바 스크립트

$(function() { 
$('#container').highcharts({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
    }, 
    title: { 
     text: "I want this to be responsive", 
        margin: 10, 
     align: 'center', 
     verticalAlign: 'middle', 

    }, 
    tooltip: { 
     pointFormat: '{name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 

     } 
    }, 
    series: [{ 
     type: 'pie', 
        data: [{ 
     name: 'Item', 
     y: 81.52, 
     sliced: true, 
     selected: true 
    }, { 
     name: 'Item', 
     y: 2.91, 
    }, { 
     name: 'Item', 
     y: 4.07 
    }, { 
     name: 'Item', 
     y: 2.07 
    }, { 
     name: 'Item', 
     y: 9.44 
    }], 
    innerSize: '50%', 
    }] 
}); 

$(window).resize(function(){ 
    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 
    ); 
}); 

차트는 브라우저 크기를 조절하지만 동일한 기능을 수행 할 제목을 얻을 수 없다 - 그냥 차트를 겹칩니다. 어떤 도움을 많이 주시면 감사하겠습니다!

Answer 1

전체 차트를 취급하는 것과 같은 방법으로 제목을 처리 할 수 ​​있습니다. 크기는 window.resize()으로 설정하십시오. 이 차트는 처음 렌더링 후 바로 호출 할 수 있도록 내가 doResize 기능에 크기 조정에 대한 책임을 모든 코드를 이동 (아무 창 크기 조정 이벤트 없다 그리고 명시 적으로 호출 할 필요) :

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

    var w = $('#container').closest(".wrapper").width() 
     // setsize will trigger the graph redraw 

    console.log('redraw'); 
    chart.setSize(
     w, w * (3/4), false 
    ); 

    chart.title.update({ 
     style: { 
     fontSize: Math.round(chart.containerWidth/30) + "px" 
     } 
    }); 
    }; 

    $(window).resize(doResize); 
    doResize(); 

라이브 데모 :https://jsfiddle.net/kkulig/jksp88p1/

---

API 참조 : https://api.highcharts.com/class-reference/Highcharts.Chart#.title