円グラフを小さくするグラフJS

Question

私のシェアポイントページには、縮小しない円グラフがあります。私が小さいほど、pxはチャートが大きくなります。たとえば：

<canvas id="myChart2" width="800px" height="200px" ></canvas> 

は円グラフが小さくなりながら

<canvas id="myChart2" width="200px" height="200px" ></canvas> 

は、巨大なグラフになります。

パイは完全に表示されますが、私はそれを小さくすることはできません。

私はChart.JSのいくつかのJavaを使用しています。

HTMLは次のとおりです。

<canvas id="myChart2" width="200px" height="200px" ></canvas> 

グラフのオプションは次のとおりです。

  var options = { 
       tooltipEvents: [], 
       showTooltips: true, 
       onAnimationComplete: function() { 
        this.showTooltip(this.segments, true); 
       }, 
       tooltipTemplate: "<%= label %> - <%= value %>", 
       responsive: true, 
       scaleBeginAtZero: true, 
       // you don't have to define this here, it exists inside the global defaults 
       legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
      } 
      // context 
      var ctxPTD = $("#myChart2").get(0).getContext("2d"); 

      // data 
      var dataPTD = [{ 
        label: "Active", 
        color: "#5093ce", 
        highlight: "#78acd9", 
        value: totalActive++ 
       }, 
       { 
        label: "Completed", 
        color: "#c7ccd1", 
        highlight: "#e3e6e8", 
        value: totalInActive++ 
       } 
      ] 

      var itemStatuses = new Chart(ctxPTD).Pie(dataPTD, options); 

Answer 1

小さな円グラフを作成するには、そう...

ように、あなたのチャートオプションで falseに responsiveプロパティを設定します

var options = { 
    ... 
    responsive: false, 
    ... 
}