चार्ट.जेएस कैनवास कंटेनर तत्व के पैडिंग का सम्मान क्यों नहीं कर रहा है?

Question

मैं चार्ट.जेएस का उपयोग एक साधारण रेखा चार्ट के साथ कर रहा हूं लेकिन चार्ट.जेएस द्वारा गणना की गई चौड़ाई और ऊंचाई गुण पैडिंग को अनदेखा करते हुए मूल तत्व की कुल चौड़ाई और ऊंचाई पर आधारित प्रतीत होते हैं।

var options = { 
 
    maintainAspectRatio: false, 
 
    responsive: true 
 
}; 
 

 
var data = { 
 
    labels: ["", "", "", "", "", "", ""], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fillColor: "rgba(220,220,220,0.2)", 
 
      strokeColor: "rgba(220,220,220,1)", 
 
      pointColor: "rgba(220,220,220,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(220,220,220,1)", 
 
      data: [65, 59, 80, 81, 56, 55, 40] 
 
     }, 
 
     { 
 
      label: "My Second dataset", 
 
      fillColor: "rgba(151,187,205,0.2)", 
 
      strokeColor: "rgba(151,187,205,1)", 
 
      pointColor: "rgba(151,187,205,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(151,187,205,1)", 
 
      data: [28, 48, 40, 19, 86, 27, 90] 
 
     } 
 
    ] 
 
}; 
 

 
var ctx1 = document.getElementById("mychart1").getContext("2d"); 
 
var myNewChart = new Chart(ctx1).Line(data, options);

.container { 
 
    padding: 15px 15px 15px 15px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    width:100%; 
 
    height:100%; 
 
}

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

 

 
<div class='container'> 
 
    <canvas id='mychart1' class='child'></canvas> 
 
</div> 
 
<br> 
 
<div class='container'> 
 
    <div class='child'>test</div> 
 
</div>

JSFiddle

दूसरा कंटेनर और बच्चे व्यवहार मैं उम्मीद कर रहा हूँ पता चलता है। क्या यह एक बग है कि Chart.js कैनवास की चौड़ाई और ऊंचाई की गणना कैसे करता है या क्या मैं स्टाइलिंग गलती कर रहा हूं?

Answer 1

मैं भी एक संवेदनशील कैनवास की जरूरत है और इस मुद्दे पर था।

<div> 
    <canvas id="chart"></canvas> 
</div> 

Chart.js कंटेनर की चौड़ाई को कैनवास मापता है के बाद से, गद्दी अनदेखी, मैं सिर्फ एक div में कैनवास लपेटा: यह मेरा ठीक था। div पैडिंग के साथ कंटेनर के लिए स्केल, पैडिंग का सम्मान, और फिर उत्तरदायी चार्ट.जेएस canvasdiv पर स्केल।

Answer 2

अपने jsfiddle उदाहरण में गलत पर responsive विशेषता बदली:

var options = { 
    maintainAspectRatio: true, 
    responsive: false 
}; 

पहले की सेटिंग दोनों ऊंचाई और चौड़ाई के लिए एक अतिरिक्त 30px जोड़ा जब आप तत्व क्रोम देव उपकरणों का उपयोग करने का निरीक्षण किया। कैनवास के आकार की वजह से कैनवास का आकार बदलने की बात आती है तो इसे समस्याग्रस्त नहीं होना चाहिए।

JSFIDDLE EXAMPLE

Answer 3

"उदाहरण के लिए, आप उत्तरदायी होना, और आकार बदलने जब ब्राउज़र विंडो करता है करने के लिए बनाया सभी चार्ट चाहता था, तो निम्न सेटिंग बदला जा सकता है:"

Chart.defaults.global.responsive = true;

"अब, हर बार जब हम बनाते हैं एक चार्ट, विकल्प। उत्तरदायी सच होगा। "

स्रोत: http://www.chartjs.org/docs/

Answer 4

एक बेहतर समाधान का उपयोग करने .container {box-sizing: border-box;}

Answer 5

मैं भी इस समस्या के लिए googled और एक सरल समाधान के साथ समाप्त हो गया है।

मैंने height जोड़ा ताकि यह स्वचालित रूप से चौड़ाई को समायोजित कर सके और इसे एक अच्छे तरीके से दिखाएं। यदि आप वास्तव में चाहते हैं कि आप width भी जोड़ सकते हैं। canvas तत्व HTML5 का हिस्सा है।

यह आपको px के साथ मूल्य इनपुट करने की अनुमति नहीं देता है। तो उस पर ध्यान न दें और केवल वां संख्यात्मक मूल्य टाइप करें जो आपको चाहिए।

<canvas id="myChart" height="80"></canvas> 

Answer 6

मैंने इन्हें लपेट लिया और फिर इस सीएसएस का उपयोग किया।

.chart-container { 
    box-sizing:border-box; 
    margin:2%; 
    width:96%; 
} 

यह इसे किनारों और उत्तरदायी से गद्देदार रखता है। मैंने 2% का उपयोग किया लेकिन आप अपने लेआउट के अनुरूप जो भी प्रतिशत का उपयोग कर सकते हैं।