콘텐츠 크기를 조정할 때 원형 차트의 크기를 조정하십시오.

Question

자바 스크립트 원형 차트를 사용했습니다. 고정 너비 또는 높이를 설정하면 잘 작동하지만 너비와 높이를 100 %로 설정하면 원형 차트가 표시되지 않습니다. 내용의 크기가 변경되면 (100 %) 변경 너비와 높이가 필요합니다.

JS :

$(function() { 
      var data = []; 
      data[0] = { label: "word", data: 25}; 
      data[1] = { label: "withdrawn", data: 75 }; 
      data[2] = { label: "in progress", data: 50 }; 

      $.plot($("#graph-1"), data, { 
       series: { 
        pie: { 
         show: true, 
         radius: 1, 
         label: { 
          show: true, 
          radius: 2/3, 
          formatter: function(label, series){ 
        return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/></div>'; 
       }, 
          threshold: 0.1 
         }, 
         combine: {color: '#666', threshold: 0.1} 
        } 
       }, 
       legend: {show: false} 
      }); 
}); 

HTML :

<td class="graph-td"> 
       <div id="graph-1" class="graph-1"></div> 
      </td> 

CSS :

/* In this case pie chart working norm */ 
.graph-1 { width:250px; height: 250px; margin: 0 auto;} 

/* In this case pie chart is not displaying */ 
.graph-1 { width:100%; height: 100%; margin: 0 auto;} 

Answer 1

$(window).on('resize', function(){ 


    // get container width & height 
    // destroy your chart 
    // redraw your chart with new dimensions 
    // or refresh your chart view, or change the width/height, depending upon how your plugin works 

});