প্রস্থ এবং উচ্চতা নির্ধারণ

Question

আমি দস্তাবেজে প্রদত্ত Chart.js এর উদাহরণ কোডটি চেষ্টা করছি ।

প্রস্থ এবং উচ্চতা 400px / 400px এ ক্যানভাস উপাদানটিতে ইনলাইনটি নির্দিষ্ট করা হয়েছে।

চার্টটি রেন্ডার করার সময় এটি পুরো পৃষ্ঠার প্রস্থে উড়িয়ে দেওয়া হয় এবং ডানদিকের প্রান্তটি কেটে দেয়।

উদাহরণ দেখুন

আমি কীভাবে / কোথায় চার্টের প্রস্থ / উচ্চতা নিয়ন্ত্রণ করব?

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

Answer 1

আপনি ক্যানভাস স্টাইলের প্রস্থকে ওভাররাইড করতে পারেন! গুরুত্বপূর্ণ ...

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

Comments

আপনাকে ধন্যবাদ, আপনার maintainAspectRatio: falseচার্টটি দেখারযোগ্য হয়েছে। তবে এখনও ডান দিকটি কেটে ফেলছেন। ইতিমধ্যে তাদের নিজস্ব বেসিক উদাহরণ কোডটি দিয়ে এই ধরণের সমস্যাগুলি আঘাত করা আমাকে অবাক করে দিয়েছে ওয়েদার চার্ট.জেএস একটি ভাল বাজি। (ডান দিকটি এখনও কাটা রয়েছে ...)

— ফেলো অচেনা

এটি গ্রাফ আকারের সমস্যা সমাধান করে, গ্রাফটি এটি ফিট করার জন্য মাপেনি। Chart.js এর মধ্যে থেকে গ্রাফের আকারটি সেট করার কোনও উপায় আছে কি?

— ফিরিক্স

দেখা যাচ্ছে যে গ্রাফটি প্রদত্ত আকারগুলি মেনে চলতে আপনাকে প্রতিক্রিয়াশীল করতে হবে। লজ্জাজনক যে এটি নিয়ন্ত্রণ এবং প্রতিক্রিয়াশীল প্রকৃতি বজায় রাখার উপায় বলে মনে হচ্ছে না ...

— ফিরিক্স

ধন্যবাদ. আপনার maintainAspectRatioসত্যিই আমার জন্য সাহায্য করে।

— আরসমান আহমদ

"! গুরুত্বপূর্ণ" ব্যবহার করা কার্যকর হওয়ার পরেও এটি সমাধানের সঠিক উপায় নয়। নীচের @ নিকোলাস সমাধান "ডিভের মধ্যে ক্যানভাস মোড়ানো" একটি ভাল উপায়, কারণ আমরা ক্যানভাসকে এমনভাবে পরিবর্তন করতে চাই যাতে তার আকার পরিবর্তন করা যায়।

— অভিষেক বোড়ুগু

Answer 2

আপনি সহজেই ধারকটি চার্টটি ঘিরে রাখতে পারেন (অফিসিয়াল ডক হিসাবে 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

Comments

এইটা কাজ করে. এখানে কীটি একটি বাহ্যিক ডিভ ব্যবহার করা এবং ক্যানভাস উপাদানটির চেয়ে প্রস্থ এবং উচ্চতা সেট করা।

— জন দোহার্টি

এটি কাজ করার জন্য, চার্ট-ধারকটি তুলনামূলকভাবে অবস্থান করা উচিত।

— সঞ্জু

আমার জন্য তবে কেবল !importantকৌণিক প্রকল্পে কাজ করে

— 01 Гудиев

Answer 3

আমার ক্ষেত্রে, responsive: falseবিকল্পগুলির অধীনে পাস করা সমস্যার সমাধান করে। আমি নিশ্চিত নই কেন প্রত্যেকে আপনাকে বিপরীত কাজ করতে বলছে, বিশেষত যেহেতু সত্যই ডিফল্ট।

Comments

একই অবস্থা. সেটিং responsive: trueসম্পূর্ণভাবে চার্টে চেহারা skewed।

— পল

আমার জন্য তবে কেবল !importantআমার কৌণিক প্রকল্পে কাজ করে

— 01 Гудиев

Answer 4

আমার জন্য কাজ করে

responsive:true
maintainAspectRatio: false


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

ধন্যবাদ

Answer 5

আমি বিশ্বাস করতে পারি না যে কেউ আপেক্ষিক পিতা-মাতার উপাদান ব্যবহারের বিষয়ে কথা বলেনি।

কোড:

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

সূত্র: অফিসিয়াল ডকুমেন্টেশন

Answer 6

উপরে উল্লিখিত নয় তবে ক্যানভাস উপাদান ব্যবহার max-widthবা ব্যবহার max-heightকরাও একটি সম্ভাবনা।

Answer 7

নীচে আমার পক্ষে কাজ করেছে - তবে এটি "বিকল্পগুলি" প্যারামে রাখতে ভুলবেন না।

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

Answer 8

এটি আমার ক্ষেত্রে সহায়তা করেছে:

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

Answer 9

আপনি aspectRatioআপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন :

options:{
     aspectRatio:4 //(width/height)
}

Comments

এটি কীভাবে কাজ করে তা আপনি পরিষ্কার করতে পারেন? 4কোনও অনুপাতের অনুপাত নয়। আপনার মন্তব্য বলেছেন (width/height)কিন্তু এটি কীভাবে প্রয়োগ করা উচিত তা অস্পষ্ট। সেট হিসাবে পাস করার কোন উপায় আছে? বা আপনি কি আক্ষরিক অর্থে প্রস্তাবিত উচ্চতা দ্বারা প্রস্তাবিত প্রস্থকে বিভক্ত করবেন, যেমন, 3: 4 হয় 0.75?

— জেরেমি কেনে

Answer 10

এটি ব্যবহার করুন, এটি সূক্ষ্ম কাজ করে।

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

এবং অধীনে options,

responsive:true,