web-dev-qa-db-ja.com

Chart.jsでチャートの高さを設定する

Chart.jsを使って水平棒グラフを描きたいのですが、キャンバスからスクリプトに割り当てた高さを使う代わりに、グラフを拡大縮小し続けます。

スクリプトからグラフの高さを設定する方法はありますか？

フィドル参照： Jsfidle

HTML

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

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

JavaScript

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
                }
            }]
        }
    }
});
javascriptjquerychart.js
86
Vincent T

var ctx = $('#myChart');は要素のリストを返しているようです。あなたはctx[0]を使って最初のものを参照する必要があるでしょう。高さもプロパティであり、関数ではありません。

私は私のコードでこのようにしました：

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

オプションで縦横比の維持を無効にすると、利用可能な高さが使用されます。

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

最も簡単な方法は、キャンバス用のコンテナを作成してその高さを設定することです。

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

と設定

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

これは私のために働いた：

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,
13
illusionist

キャンバス要素を、相対的に配置された親divで囲み、そのdivに希望の高さを指定して、オプションでmaintainAspectRatio：falseを設定します。

//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>
10
Geoff Kendall

彼は正しいです。もしあなたがjQueryを使い続けたいのであれば、こうすることができます。

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

または

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

チャートの縦横比を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;
3
Franz Kiermaier

@numediaweb で与えられた答えに追加するだけで

maintainAspectRatio=falseを設定するための指示に従った後で壁にぶつかっている場合：私はもともと私がAngular 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"を削除する必要があります。代わりに、囲むdivのクラスを定義し、その高さをCSSで定義します。

これを実行すると、チャートの幅は変化しますが高さは固定されます。

0
Andrew