javascript - 调整内容大小时调整饼图大小

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

});