Wykres Charts.js nie skalujący się do rozmiaru płótna

Question

Próbuję zrobić wykres za pomocą Charts.js (obecny jest tylko bardzo prostym przykładem, próbuję uzyskać pracę, nieco zaczerpniętą z dokumentacji Chart.js) a wykres nie skaluje się do rozmiaru płótna, które mu podaję. Oto cały odpowiedni kod.

Aby zaimportować go:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script> 

Następnie podłączyć go do pliku javascript w następujący sposób:

<script type="text/javascript" src="js/stats_tab.js"></script> 

Mam płótno skonfigurować:

 <div id="graph_2015" class ="stats_box"> 
      <h4>Graph 2015</h4> 
      Text 
      <canvas id="myChart" width="200" height="200"></canvas> 
     </div> 

A potem wreszcie w stats_tab.js, mam następujący kod:

window.onload=function(){ 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: [1,2,3,4,5,6,7,8,9,10], 
      datasets: [ 
       { 
        label: "My First dataset", 
        data: [1,2,3,2,1,2,3,4,5,4] 
       } 
      ] 
     }, 
     options: { 
     } 
    }); 
} 

Wykres wyświetla się ładnie, ale nie pozwala na skalowanie do rozmiaru płótna, które mu dałem. Nie ma również żadnych danych CSS dotyczących żadnego z zaangażowanych elementów div. Funkcja inspekcji na chrome daje mi znać, że końcowy wykres jest 676 przez 676 zamiast 200 przez 200 I określone. Nie bardzo wiem, co się dzieje.

Dzięki!

Answer 1

This powinien działać. Zasadniczo, po prostu dodaj właściwości width i height do javascript:

var ctx = document.getElementById("myChart").getContext("2d"); 
ctx.canvas.width = 200; 
ctx.canvas.height = 200; 
var myChart = new Chart(ctx,......... 

referencyjny: Chart.js canvas resize

Answer 2

Szerokość i właściwość height, które można ustawić na płótnie pracować tylko wtedy, gdy tryb reagujący na Chartjs' jest fałszywe (co jest domyślnie prawdą). Zmień swój stats_tab.js na ten i będzie działać.

window.onload=function(){ 
     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: [1,2,3,4,5,6,7,8,9,10], 
       datasets: [ 
        { 
         label: "My First dataset", 
         data: [1,2,3,2,1,2,3,4,5,4] 
        } 
       ] 
      }, 
      options: { 
       responsive: false 
      } 
     }); 
    } 

Answer 3

Ważnym punktem jest: width i height właściwości nie mają rozmiar w pikselach, ale stosunek.

<canvas id="myChart" width="400" height="400"></canvas> 

W tym przykładzie jest to stosunek 1: 1. Tak więc, jeśli Twój html contenair ma szerokość 676 px, to wykres będzie 676 * 675px
To może wyjaśnić niektóre typowe błędy.

Możesz wyłączyć tę funkcję, ustawiając maintainAspectRatio na wartość false.