Charts.js ग्राफ कैनवास आकार में स्केल नहीं कर रहा है

Question

मैं चार्ट्स.जेएस के साथ ग्राफ बनाने की कोशिश कर रहा हूं (वर्तमान में केवल एक बहुत ही सरल उदाहरण है जो मैं काम करने की कोशिश कर रहा हूं, कुछ हद तक चार्ट.जेएस दस्तावेज से लिया गया है) और ग्राफ कैनवास के आकार को स्केल नहीं कर रहा है जिसे मैं इसे दे रहा हूं। यहां सभी प्रासंगिक कोड हैं।

इसे आयात करने के लिए:

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

फिर, मैं इसे एक जावास्क्रिप्ट फ़ाइल से कनेक्ट इस प्रकार है:

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

मैं अपने कैनवास की स्थापना की है:

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

और फिर अंत में figures_tab.js में, मेरे पास निम्न कोड है:

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: { 
     } 
    }); 
} 

ग्राफ अच्छी तरह से प्रदर्शित होता है, लेकिन यह इसे दिए गए कैनवास के आकार तक स्केल करने से इंकार कर देता है। इसमें शामिल किसी भी divs के लिए प्रासंगिक कोई सीएसएस भी नहीं है। क्रोम पर निरीक्षण सुविधा मुझे बताती है कि 200 से 200 के अनुसार अंतिम ग्राफ 676 से 676 है। वास्तव में यकीन नहीं है कि क्या हो रहा है।

धन्यवाद!

Answer 1

This काम करना चाहिए। मूल रूप से, सिर्फ अपने जावास्क्रिप्ट को चौड़ाई और ऊंचाई गुण जोड़ें:

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

संदर्भ: Chart.js canvas resize

Answer 2

अगर Chartjs 'उत्तरदायी मोड गलत है चौड़ाई और ऊंचाई संपत्ति आप कैनवास के लिए निर्धारित है कि केवल काम (जो डिफ़ॉल्ट रूप से सच है)। इस पर अपना figures_tab.js बदलें और यह काम करेगा।

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

महत्वपूर्ण बात यह है: width और height गुण पिक्सल लेकिन अनुपात में आकार नहीं हैं।

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

इस उदाहरण में, यह 1: 1 अनुपात है। इसलिए, यदि आपका एचटीएमएल contenair 676 पीएक्स चौड़ाई है तो आपका चार्ट 676 * 675px
होगा जो कुछ सामान्य गलतियों को समझा सकता है।

आप maintainAspectRatio को गलत पर सेट करके इस सुविधा को अक्षम कर सकते हैं।