चार्ट में चार्ट की ऊंचाई सेट करें

138

मैं 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
                }
            }]
        }
    }
});
javascript  jquery  chart.js 
— विंसेंट टी
स्रोत

जवाबों:

71

ऐसा लगता है कि var ctx = $('#myChart');तत्वों की एक सूची वापस आ रही है। आपको उपयोग करके पहले संदर्भ देना होगा ctx[0]। इसके अलावा ऊंचाई एक संपत्ति है, एक फ़ंक्शन नहीं है।

मैंने अपने कोड में इसे इस तरह किया: 

var ctx = document.getElementById("myChart");
ctx.height = 500;
— Riscie
स्रोत
5
@MattSaunders यह पिक्सेल में है।
— जोनाथन लैम
334

यदि आप विकल्पों में बनाए पहलू अनुपात को अक्षम करते हैं तो यह उपलब्ध ऊंचाई का उपयोग करता है:

var chart = new Chart('blabla', {
                type: 'bar',
                data: {
                },
                options: {
                    maintainAspectRatio: false,
                }
            });
— numediaweb
स्रोत
Yeaahh! यह ठीक काम कर रहा है। इस टिप के लिए धन्यवाद। सबसे अच्छा संबंध है आदमी।
— सेदत कुमकु
14
क्या यह स्वीकृत उत्तर नहीं है? पूरी तरह से काम करता है
— टॉम डूडलर
3
दिलचस्प बात यह है कि यदि आप destroy()चार्ट बनाते हैं और फिर उसी कैनवस पर दूसरी बार बनाते हैं तो कैनवास की ऊंचाई को नष्ट करने के बाद गड़बड़ हो सकती है और निर्माण से पहले फिर से लागू किया जाना चाहिए। हालाँकि, updateयदि आप विकल्प नहीं बदलते हैं, तो आप इसके बजाय विध्वंस और उपयोग की विधि से बच सकते हैं।
— घुमारवीं
5
मैं इसे उपलब्ध ऊँचाई का उपयोग कैसे करूँ लेकिन एक मिनट की ऊँचाई भी निर्धारित करूँ?
— Zapnologica
1
यह समझने के लिए थोड़ा सा समझाना होगा कि इस संपत्ति को अक्षम करने से क्या होता है (पहले से चर्चा की गई चीजों को छोड़कर)।
— fgblomqvist
115

सबसे आसान तरीका कैनवास के लिए एक कंटेनर बनाना और उसकी ऊंचाई निर्धारित करना है:

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

और सेट करें

options: {  
    responsive: true,
    maintainAspectRatio: false
}
— bibamann
स्रोत
21
इसके लिए धन्यवाद, यहां कुंजी ग्राफ के विकल्पों में सेट maintainAspectRatioकरना falseहै, अन्यथा विशेषता के heightमाध्यम से असाइन किया गया styleवास्तव में प्रभावी नहीं होगा।
— बेन
2
बेन का सुझाव सोना है।
— राबूनलाइन 12
के लिए डिफ़ॉल्ट मान responsiveविकल्प है true। विवरण: Chartjs.org/docs/latest/general/…
— डेम पिलाफियन
यह स्पष्ट करने के लिए धन्यवाद कि heightसंपत्ति एक मूल तत्व पर होनी चाहिए न कि कैनवास पर
— Savage
16

आप अपने कैनवास तत्व को पेरेंट डिव में लपेट सकते हैं, अपेक्षाकृत स्थिति में, फिर उस डिव को जो आप चाहते हैं, उसे सेट करें। maintainAspectRatio: आपके विकल्पों में गलत

//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>
— ज्योफ केंडल
स्रोत
चार्ट.जेएस वेबसाइट पर प्रलेखन के आधार पर यह सही दृष्टिकोण प्रतीत होता है।
— रयान डी
14

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

मैंने HTML से ऊँचाई निर्धारित की है 

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,
— जादूगर
स्रोत
6

वह सही है। यदि आप jQuery के साथ रहना चाहते हैं तो आप ऐसा कर सकते हैं

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

या

var ctx = $('#myChart');
ctx.attr('height',500);
— relief.melone
स्रोत
वह डॉलर चिन्ह क्या है?
— Tiberiu-Ionuț स्टेन
1
$ साइन एक चयनकर्ता और jQuery का एक उपनाम है
— आंद्रेई एरडॉस
4

चार्ट का पहलू अनुपात सेट करें 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;
— फ्रांज किरमाइर
स्रोत
4

आपको कैनवास तत्व के लिए html ऊंचाई विशेषता का उपयोग करना चाहिए:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>
— बशरत हुसैन
स्रोत
2

मैंने एक कंटेनर बनाया और इसे व्यू पोर्ट की वांछित ऊंचाई (चार्ट या चार्ट विशिष्ट आकार के आधार पर) सेट किया:

.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,
}
— HalfMens
स्रोत
2

आप कैनवास पर आयाम भी सेट कर सकते हैं

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

और फिर निर्दिष्ट आकार में चार्ट को हमेशा बनाए रखने के लिए उत्तरदायी विकल्पों को गलत पर सेट करें ।

options: {
    responsive: false,
}
— velval
स्रोत
1

मैन्युअल रूप से ऊंचाई निर्धारित करने के बजाय मूल तत्व को 100% भरने के लिए चार्ट की आवश्यकता है, और समस्या माता-पिता को हमेशा शेष स्थान को भरने के लिए मजबूर करने के लिए थी।

उत्तरदायी और अनुपात विकल्प (संबंधित चार्टज डॉक देखें ) सेट करने के बाद , निम्नलिखित सीएसएस ने चाल चली :

एचटीएमएल

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

एससीएसएस:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}
— अहंकार
स्रोत
0

बस @numediaweb द्वारा दिए गए उत्तर पर जोड़ना है

मामले में आप दीवार के खिलाफ अपना सिर पीट रहे हैं क्योंकि सेट करने के निर्देशों का पालन करने के बाद maintainAspectRatio=false: मैंने मूल रूप से अपने कोड को एक उदाहरण से कॉपी किया था जो मुझे एक वेबसाइट पर मिला था।

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

इस काम को सही ढंग से करने के लिए आपको एम्बेडेड (और अनावश्यक) को हटाना होगा style="display: block" बजाय इसके कि संलग्नक div के लिए एक वर्ग को परिभाषित करें, और सीएसएस में इसकी ऊंचाई को परिभाषित करें।

एक बार जब आप ऐसा कर लेते हैं, तो चार्ट में उत्तरदायी चौड़ाई लेकिन निश्चित ऊंचाई होनी चाहिए।

— एंड्रयू
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.