調整內容大小調整餅圖

Question

我使用JavaScript餅圖和如果我設置固定的寬度或高度它工作正常，但如果我設置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 

});