Machen Sie Kreisdiagramm kleiner Chart JS

Question

Ich habe ein Tortendiagramm auf meiner Sharepoint-Seite, die nicht schrumpfen wird. Je kleiner ich den px mache, desto größer wird das Diagramm. Zum Beispiel:

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

macht das Diagramm riesige während

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

das Diagramm kleiner Kuchen macht.

Der Kuchen zeigt perfekt Ich kann es nur nicht kleiner.

Ich verwende etwas Java von Chart.JS.

HTML ist:

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

Die Chart-Optionen sind:

  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

Um das Kreisdiagramm kleiner zu machen, setzen responsive Eigenschaft auf false in Ihrem Diagramm-Optionen, wie so ...

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