चार्ट.जस कैनवास का आकार बदल जाता है

Question 1

में ( Android WebView HTML5 कैनवस त्रुटि ) मैंने ग्राफ.जेएस लाइब्रेरी का उपयोग करके ग्राफ़ को प्लॉट करने के संबंध में एक प्रश्न पोस्ट किया है। मेरे पास अब समस्या यह है कि यदि मैं फ़ंक्शन को ग्राफ़ को कई बार प्लॉट करने के लिए कहता हूं, तो कैनवास हर बार आकार बदलता है। हर बार ग्राफ को एक ही कैनवस पर दोबारा तैयार किया जाता है, लेकिन इसका आकार भी बदल जाता है। मैंने कैनवास का आकार निर्धारित करने की भी कोशिश की लेकिन सफलता के बिना।

क्या कारण हो सकता है? कैनवास हर बार क्यों आकार बदलता है?

Question 2

मुझे इसके साथ बहुत सारी समस्याएं थीं, क्योंकि उस सब के बाद मेरी रेखा ग्राफिक भयानक लग रही थी जब माउस मँडरा रहा था और मुझे यह करने का एक सरल तरीका मिला, आशा है कि यह मदद करेगा :)

इन चार्ट का उपयोग करें। विकल्प:

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,

Question 3

क्या हो रहा है चार्ट.जैस कैनवास के आकार को गुणा करता है जब इसे कहा जाता है तो सीएसएस का उपयोग करके इसे वापस स्केल करने का प्रयास किया जाता है, इसका उद्देश्य उच्च-डीपीआई उपकरणों के लिए उच्च रिज़ॉल्यूशन ग्राफ प्रदान करना है।

समस्या यह है कि यह एहसास नहीं है कि यह पहले से ही ऐसा कर चुका है, इसलिए जब क्रमिक समय कहा जाता है, तो यह पहले से ही गुणा (दोगुना या जो भी) आकार फिर से हो जाता है जब तक कि चीजें टूटने लगती हैं। (वास्तव में क्या हो रहा है, यह जाँच कर रहा है कि क्या यह चौड़ाई और ऊँचाई के लिए DOM विशेषता को बदलकर कैनवस में और अधिक पिक्सेल जोड़ सकता है, यदि ऐसा होना चाहिए, तो इसे किसी कारक से गुणा करना, आमतौर पर 2, फिर इसे बदलना, और फिर सीएसएस शैली को बदलना। पृष्ठ पर समान आकार बनाए रखने के लिए विशेषता।)

उदाहरण के लिए, जब आप इसे एक बार चलाते हैं और आपकी कैनवास की चौड़ाई और ऊंचाई 300 पर सेट हो जाती है, तो यह उन्हें 600 पर सेट करता है, फिर शैली विशेषता को 300 में बदल देता है ... लेकिन यदि आप इसे फिर से चलाते हैं, तो यह देखता है कि DOM की चौड़ाई और ऊंचाई 600 हैं (इस सवाल के अन्य उत्तर को देखें कि क्यों देखें) और फिर इसे 1200 पर सेट करें और सीएसएस की चौड़ाई और ऊंचाई 600 तक।

सबसे सुरुचिपूर्ण समाधान नहीं है, लेकिन मैंने रेटिना उपकरणों के लिए संवर्धित रिज़ॉल्यूशन को बनाए रखते हुए बस कैनवास की चौड़ाई और ऊंचाई को मैन्युअल रूप से सेट करके प्रत्येक चार्ट पर कॉल करने से पहले इस समस्या को हल किया।

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

Question 4

यह मेरे लिए काम करता है:

<body>
    <form>
        [...]
        <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
            <canvas id="cv_values"></canvas>

            <script type="text/javascript">
                var indicatedValueData = {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            [...]
                        };

                var cv_values = document.getElementById("cv_values").getContext("2d");
                var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
            </script>
        </div>
    </form>
</body>

आवश्यक तथ्य यह है कि हमें कैनवास का आकार डी-टैग में सेट करना होगा।

Question 5

आईओएस और एंड्रॉइड में ब्राउज़र स्क्रॉल करते समय टूलबार को छुपाता है, जिससे खिड़की का आकार बदल जाता है जो ग्राफ़ को आकार देने के लिए लीड चार्टज को इंटर्न करता है। इसका समाधान पहलू अनुपात को बनाए रखना है।

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

इससे आपकी समस्या का समाधान हो जाना चाहिए।

Question 6

जैसा कि jcmiller11 ने सुझाव दिया है, चौड़ाई और ऊंचाई सेट करने से मदद मिलती है। चार्ट को चित्रित करने से पहले कैनवास की चौड़ाई और ऊंचाई को पुनः प्राप्त करने के लिए एक छोटा सा समाधान है। फिर चार्ट के प्रत्येक बाद के पुन: ड्रा पर चार्ट सेट करने के लिए उन नंबरों का उपयोग करना। यह सुनिश्चित करता है कि जावास्क्रिप्ट कोड में कोई स्थिरांक नहीं हैं।

ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;

function drawchart() {
    ctx.canvas.width = ctx.canvas.originalwidth;
    ctx.canvas.height = ctx.canvas.originalheight;

    var chartctx = new Chart(ctx);
    myNewBarChart = chartctx.Bar(data, chartSettings); 
}

Question 7

मुझे यहाँ कुछ छोटे-छोटे ट्वीक के साथ कई उत्तरों के संयोजन का उपयोग करना था।

सबसे पहले, यह आवश्यक है कि आप कैनवास तत्व को ब्लॉक-स्तरीय कंटेनर में लपेटें। मैं तुमसे कहता हूं, कैनवास के तत्व को किसी भी भाई-बहन को न दें; यह एक अकेला बच्चा हो, क्योंकि यह जिद्दी और खराब है । (आवरण को उस पर लगाए गए किसी भी आकार के प्रतिबंध की आवश्यकता नहीं हो सकती है, लेकिन सुरक्षा के लिए इसे लागू करने के लिए अधिकतम ऊंचाई होना अच्छा हो सकता है।)

यह आश्वस्त करने के बाद कि पिछली स्थितियां पूरी हो गई हैं, चार्ट की शुरुआत करते समय, सुनिश्चित करें कि निम्नलिखित विकल्पों का उपयोग किया जाता है:

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

यदि आप चार्ट की ऊंचाई को समायोजित करना चाहते हैं, तो कैनवास तत्व स्तर पर ऐसा करें।

<canvas height="500"></canvas>

बच्चे के साथ किसी अन्य तरीके से व्यवहार करने की कोशिश न करें। इसका परिणाम संतोषजनक ढंग से, उचित रूप से निर्धारित चार्ट में होना चाहिए, जो अपने पालना में शांति से रहता है।

Question 8

मुझे इसी तरह की समस्या थी और आपका जवाब मिल गया .. मैं आखिरकार एक समाधान के लिए आया।

ऐसा लगता है कि Chart.js के स्रोत में निम्नलिखित है (संभवतः क्योंकि यह एक ही कैनवास में पुन: रेंडर करने और पूरी तरह से अलग ग्राफ के लिए नहीं है):

    //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicePixelRatio) {
    context.canvas.style.width = width + "px";
    context.canvas.style.height = height + "px";
    context.canvas.height = height * window.devicePixelRatio;
    context.canvas.width = width * window.devicePixelRatio;
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
}

यह ठीक है अगर इसे एक बार कहा जाता है, लेकिन जब आप कई बार रिड्रा करते हैं तो आप कैनवास के DOM तत्व के आकार को कई बार बदलकर फिर से आकार ले लेते हैं।

उम्मीद है की वो मदद करदे!

Question 9

अगर किसी को समस्या हो रही है, तो मुझे एक समाधान मिला जिसमें जवाबदेही का त्याग करना शामिल नहीं है आदि।

बस अपने कैनवास को एक डिव कंटेनर (बिना स्टाइल के) में लपेटें और चार्ट कंस्ट्रक्टर को कॉल करने से पहले आईडी के साथ एक खाली कैनवास पर div की सामग्री को रीसेट करें।

उदाहरण:

HTML:

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

जे एस:

$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual

Question 10

मैंने jQuery का उपयोग करके कैनवस का आकार बदलने की कोशिश की, लेकिन यह अच्छी तरह से काम नहीं करेगा। मुझे लगता है कि CSS3 सबसे अच्छा विकल्प है जिस पर आप प्रयास कर सकते हैं, यदि आप निश्चित स्तर पर होवर जूमिंग करना चाहते हैं।

अन्य कोडपैन लिंक से होवर विकल्प:

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

मेरे कोडपैन लिंक का पालन करें:

https://codepen.io/hitman0775/pen/XZZzqN

Question 11

मुझे भी यही समस्या आ रही थी। मैं विकल्प सेट करके इसे हल करने में सक्षम था:

responsive: false,
maintainAspectRatio: true,
showScale: false,

स्निपेट का विस्तार करें

और सीएसएस में, कंटेनर की चौड़ाई को कैनवास के समान सेट करें:

    #canvasContainer { 
      width: 300px;
    }
    
    canvas {
      width: 300px;
    }

स्निपेट का विस्तार करें

Question 12

मुझे एक ही तरह का स्केलिंग इश्यू एंगुलर सीएलआई का उपयोग कर रहा था। इस लाइन को index.html से हटाकर काम करने में सक्षम था:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

और फिर कोणीय-cli.json फ़ाइल में, स्क्रिप्ट अनुभाग में, इसका उपयोग करते हुए:

"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]

स्रोत : mikebarr58

Question 13

जोड़ें divऔर यह समस्या को हल करेगा

<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>

Question 14

 let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
 let width = canvasBox.clientWidth;
 let height = canvasBox.clientHeight;
 let charts = ReactDOM.findDOMNode(this.refs.charts);
 let ctx = charts.getContext('2d');
 ctx.canvas.width = width;
 ctx.canvas.height = height;
 this.myChart = new Chart(ctx);