चौड़ाई और ऊंचाई निर्धारित करना

85

मैं डॉक्स में दिए गए चार्ट.जैस के लिए उदाहरण कोड की कोशिश कर रहा हूं ।

चौड़ाई और ऊंचाई को कैनवास तत्व पर 400px / 400px पर इनलाइन निर्दिष्ट किया गया है।

लेकिन जब चार्ट को रेंडर किया जाता है तो इसे पूरे पेज की चौड़ाई तक उड़ा दिया जाता है, और दूर से दाहिने छोर को काट दिया जाता है।

उदाहरण देखें

चार्ट की चौड़ाई / ऊँचाई को कैसे नियंत्रित किया जाए?

This is some bogus text because SO prohibits linking to Codepen otherwise.

chart.js

— साथी अजनबी
स्रोत

89

आप कैनवास शैली की चौड़ाई को ओवरराइड कर सकते हैं! महत्वपूर्ण ...

canvas{

  width:1000px !important;
  height:600px !important;

}

भी

responsive:true,विकल्पों के तहत संपत्ति निर्दिष्ट करें ..

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

जोड़ा विकल्पों के तहत अद्यतन: maintainAspectRatio: false,

लिंक: http://codepen.io/theConstructor/pen/KMpqvo

— KpTheConstructor
स्रोत

11

धन्यवाद, आपका maintainAspectRatio: falseचार्ट देखने योग्य बना। लेकिन अभी भी सही पक्ष काट रहा है। अपने स्वयं के मूल उदाहरण कोड के साथ पहले से ही इस तरह के मुद्दों को मारना मुझे आश्चर्यचकित कर देता है। चार्ट एक अच्छा शर्त है। (दाहिनी ओर का हिस्सा अभी भी कटा हुआ है ...)

— फेलो स्ट्रेंजर

यह ग्राफ आकार की समस्या को हल करता है, ग्राफ ने इसे फिट नहीं किया है। क्या चार्ट.जेएस के भीतर से ग्राफ आकार निर्धारित करने का कोई तरीका है?

— फ़िरिक्स

7

यह पता चला है कि आपको ग्राफ़ को उसके आकार को मानने के लिए उत्तरदायी को बंद करने की आवश्यकता है। शर्म आती है कि इसे नियंत्रित करने और उत्तरदायी प्रकृति को बनाए रखने के लिए कोई रास्ता नहीं दिखता है ...

— फ़िरिक्स

2

धन्यवाद। आपका maintainAspectRatioवास्तव में मेरे लिए मदद करता है।

— अरस्मान अहमद

"महत्वपूर्ण" का उपयोग करना काम करने के बावजूद इसे हल करने का सही तरीका नहीं है। @ नीकोल का समाधान "कैनवास को एक डिव में लपेटना" एक बेहतर तरीका है क्योंकि हम कैनवास को एक तरह से आकार देने पर नियंत्रण करेंगे जैसे हम चाहते हैं।

— अभिषेक बुरुगु

52

आप केवल चार्ट को कंटेनर के साथ घेर सकते हैं (आधिकारिक डॉक्टर के अनुसार http://www.chartjs.org/docs/latest/general/responsive.html#important-note )

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

सीएसएस

.chart-container {
    width: 1000px;
    height:600px
}

और विकल्पों के साथ

responsive:true
maintainAspectRatio: false

— निकोलस
स्रोत

1

यह काम। यहां कुंजी बाहरी div का उपयोग करना है और कैनवास तत्व के बजाय उस पर चौड़ाई और ऊंचाई सेट करना है।

— जॉन डोहर्टी

इसे काम करने के लिए, चार्ट-कंटेनर को अपेक्षाकृत स्थिति में रखा जाना चाहिए।

— संजू

मेरे लिए काम करता है लेकिन केवल !importantकोणीय परियोजना में

— Артур Гудиев

22

मेरे मामले में, responsive: falseविकल्प के तहत गुजरने से समस्या हल हो गई। मुझे यकीन नहीं है कि हर कोई आपको विपरीत करने के लिए क्यों कह रहा है, खासकर जब से सच डिफ़ॉल्ट है।

— सुरमा
स्रोत

1

मुझे भी। सेट करना responsive: trueपूरी तरह से चार्ट की उपस्थिति को तिरछा करता है।

— पॉल

मेरे लिए काम करता है लेकिन केवल !importantमेरे कोणीय प्रोजेक्ट में

— Артур Гудиев

2

मेरे लिए भी काम करता है

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

धन्यवाद

— subramanya46
स्रोत

2

मैं विश्वास नहीं कर सकता कि किसी ने भी एक रिश्तेदार मूल तत्व का उपयोग करने के बारे में बात नहीं की।

कोड:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

स्रोत: आधिकारिक दस्तावेज

— आर। गुरुंग
स्रोत

0

ऊपर वर्णित नहीं है, लेकिन कैनवास तत्व का उपयोग max-widthया उपयोग max-heightकरना भी एक संभावना है।

— Ukuser32
स्रोत

0

नीचे ने मेरे लिए काम किया - लेकिन इसे "विकल्प" परम में रखना न भूलें।

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

— Dazeh
स्रोत

0

इससे मेरे मामले में मदद मिली:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

— ओमिद एन
स्रोत

-3

यह प्रयोग करें, यह ठीक काम करता है।

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

और इसके अलावा options,

responsive:true,

— Udara
स्रोत