Chart.js এ চার্টের উচ্চতা নির্ধারণ করুন

Question

আমি Chart.js এর সাথে একটি অনুভূমিক বারের চার্ট আঁকতে চাই তবে আমি স্ক্র্যাপটি ক্যানভাসটি নির্ধারণ করে উচ্চতাটি ব্যবহার না করে চার্টটি স্কেলিং করে রাখি।

স্ক্রিপ্ট থেকে গ্রাফের উচ্চতা নির্ধারণ করার কোনও উপায় আছে কি?

ঝাঁকুনি দেখুন: Jsfidle

এইচটিএমএল

<div class="graph">
  <div class="chart-legend">

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

জাভাস্ক্রিপ্ট

var ctx = $('#myChart');

ctx.height(500);

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    maintainAspectRatio: false,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Answer 1

দেখে মনে হচ্ছে var ctx = $('#myChart');উপাদানগুলির একটি তালিকা ফিরে আসছে। আপনাকে প্রথমে ব্যবহার করে রেফারেন্স করতে হবে ctx[0]। এছাড়াও উচ্চতা একটি সম্পত্তি, কোন ফাংশন নয়।

আমি আমার কোডটিতে এটি করেছি:

var ctx = document.getElementById("myChart");
ctx.height = 500;

Comments

@ ম্যাটসৌন্ডার্স এটি পিক্সেলে রয়েছে।

— জোনাথন লাম

Answer 2

আপনি যদি বিকল্পগুলিতে বজায় রাখার অনুপাতটি অক্ষম করেন তবে এটি উপলব্ধ উচ্চতাটি ব্যবহার করে:

var chart = new Chart('blabla', {
                type: 'bar',
                data: {
                },
                options: {
                    maintainAspectRatio: false,
                }
            });

Comments

Yeaahh! এটা ঠিক কাজ করছে। এই টিপ জন্য ধন্যবাদ। শুভেচ্ছা মানুষ।

— সেদাত কুমকু

ওহে এই গৃহীত উত্তর না? পুরোপুরি কাজ করে

— টম ডুডলার

মজার বিষয় হল, আপনি যদি destroy()চার্ট করেন এবং তারপরে এটি আবার একই ক্যানভাসে দ্বিতীয়বার তৈরি করেন তবে ক্যানভাসের উচ্চতা নষ্ট হওয়ার পরে বিভ্রান্ত হতে পারে এবং সৃষ্টির আগে পুনরায় প্রয়োগ করতে হবে। যদিও, আপনি updateবিকল্পগুলি পরিবর্তন না করে আপনি এর পরিবর্তে পদ্ধতিটি ব্যবহার এবং ব্যবহার এড়াতে পারেন।

— গেরম্যান

আমি কীভাবে এটি উপলব্ধ উচ্চতা ব্যবহার করতে পারি তবে একটি ন্যূনতম উচ্চতাও সেট করতে পারি?

— Zapnologica

এই সম্পত্তিটি নিষ্ক্রিয় করে কি করে তা কিছুটা বোঝাতে বুদ্ধি করতে হবে (ইতিমধ্যে আলোচিত বিষয়গুলি বাদে)।

— fgblomqvist

Answer 3

সবচেয়ে সহজ উপায় ক্যানভাসের জন্য একটি ধারক তৈরি করা এবং এর উচ্চতা নির্ধারণ করা:

<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>

এবং সেট

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Comments

এর জন্য ধন্যবাদ, এখানে কীটি গ্রাফের বিকল্পগুলিতে সেট maintainAspectRatioকরতে হবে false, অন্যথায় অ্যাট্রিবিউটর heightমাধ্যমে নির্ধারিত styleকার্যত কার্যকর হবে না।

— বেন

বেনের পরামর্শ সোনার is

— rubeonline

responsiveবিকল্পের জন্য ডিফল্ট মান true। বিশদ বিবরণ: চার্টজস.আর.অর্গ

— ডেম পিলাফিয়ান

স্পষ্ট করে দেওয়ার জন্য ধন্যবাদ যে heightসম্পত্তিটি অবশ্যই পিতামাতার উপর থাকতে হবে ক্যানভাসে নয়

— সেভেজ

Answer 4

আপনি তুলনামূলকভাবে পজিশনে আপনার ক্যানভাস উপাদানটি প্যারেন্ট ডিভিতে গুটিয়ে রাখতে পারেন, তারপরে সেই ডিভিটি আপনি যে উচ্চতা চান সেটি দিন

//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>

<script>
new Chart(somechart, {
options: {
    responsive: true,
    maintainAspectRatio: false

/*, your other options*/

}
});
</script>

Comments

Chart.js ওয়েবসাইটে ডকুমেন্টের ভিত্তিতে এটি সঠিক পদ্ধতির বলে মনে হচ্ছে।

— রায়ান 21

Answer 5

এই একজন আমার পক্ষে কাজ করেছেন:

আমি এইচটিএমএল থেকে উচ্চতা সেট করেছি

canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]

তারপরে আমি অনুপাতের অনুপাত বজায় রাখতে অক্ষম

options: {
  responsive: true,
  maintainAspectRatio: false,

Answer 6

সে সঠিক. আপনি যদি jQuery এর সাথে থাকতে চান তবে আপনি এটি করতে পারেন

var ctx = $('#myChart')[0];
ctx.height = 500;

অথবা

var ctx = $('#myChart');
ctx.attr('height',500);

Comments

সেই ডলারের চিহ্ন কী?

— টিবিরিউ-আয়নু স্টান

$ চিহ্নটি নির্বাচক এবং jQuery এর একটি উপাধি

— আন্ড্রেই এরদোস

Answer 7

চার্টের রেশিয়ো বৈশিষ্ট্যটি 0 তে সেট করুন আমার জন্য কৌশলটি ...

    var ctx = $('#myChart');

    ctx.height(500);

    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        maintainAspectRatio: false,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
myChart.aspectRatio = 0;

Answer 8

ক্যানভাস উপাদানটির জন্য আপনার এইচটিএমএল উচ্চতার বৈশিষ্ট্যটি ব্যবহার করা উচিত:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>

Answer 9

আমি একটি ধারক তৈরি করেছি এবং এটিকে ভিউ পোর্টের পছন্দসই উচ্চতা সেট করেছি (চার্ট বা চার্টের নির্দিষ্ট আকারের উপর নির্ভর করে):

.graph-container {
width: 100%;
height: 30vh;
}

স্ক্রিন আকারে গতিশীল হওয়ার জন্য আমি নীচে কনটেইনারটি সেট করেছি:

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

অবশ্যই খুব গুরুত্বপূর্ণ (যেমনটি বহুবার উল্লেখ করা হয়েছে) optionআপনার চার্টের নীচের বৈশিষ্ট্যগুলি সেট করুন :

options:{
    maintainAspectRatio: false,
    responsive: true,
}

Answer 10

আপনি ক্যানভাসে মাত্রাও সেট করতে পারেন

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

এবং তারপরে নির্দিষ্ট আকারে সর্বদা চার্ট বজায় রাখতে প্রতিক্রিয়াশীল বিকল্পগুলি মিথ্যাতে সেট করুন ।

options: {
    responsive: false,
}

Answer 11

ম্যানুয়ালি উচ্চতা নির্ধারণের পরিবর্তে প্যারেন্ট উপাদানটি 100% পূরণ করার জন্য চার্টের প্রয়োজন ছিল এবং সমস্যাটি পিতামাতার দ্বিখণ্ডকে সর্বদা অবশিষ্ট স্থান পূরণ করতে বাধ্য করা হয়েছিল।

প্রতিক্রিয়াশীল এবং অনুপাতের বিকল্পগুলি সেট করার পরে (সম্পর্কিত চার্টজ ডক পরীক্ষা করে দেখুন ), নিম্নলিখিত সিএসএসটি কৌশলটি করেছে:

এইচটিএমএল

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

SCSS:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

Answer 12

কেবলমাত্র @numediaweb দ্বারা দেওয়া উত্তরে যুক্ত করতে

যদি আপনি দেয়ালের বিরুদ্ধে মাথা maintainAspectRatio=falseঘুরান তবে সেট করার নির্দেশাবলী অনুসরণ করার পরে : আমি মূলত আমার কোডটি কপিরাইট 2+ এর সাথে Chart.js ব্যবহার করার ওয়েবসাইটে একটি ওয়েবসাইটে পেয়েছি এমন একটি উদাহরণ থেকে অনুলিপি করেছি:

        <div style="display: block">
          <canvas baseChart
                  [datasets]="chartData"
                  [labels]="chartLabels"
                  [options]="chartOptions"
                  [legend]="chartLegend"
                  [colors]="chartColors"
                  [chartType]="chartType">
          </canvas>
        </div>

এই কাজটি সঠিকভাবে তৈরি করতে আপনাকে অবশ্যই এম্বেডড (এবং অপ্রয়োজনীয়) মুছে ফেলতে হবে style="display: block" পরিবর্তে বদ্ধ ডিভের জন্য কোনও শ্রেণি সংজ্ঞায়িত করতে হবে এবং CSS এর উচ্চতা নির্ধারণ করবে।

একবার আপনি এটি করার পরে, চার্টের প্রতিক্রিয়াযুক্ত প্রস্থ কিন্তু নির্দিষ্ট উচ্চতা হওয়া উচিত।