web-dev-qa-db-ja.com

Charts.jsグラフがキャンバスサイズに拡大縮小されない

Charts.jsでグラフを作成しようとしています（現在のグラフは、Chart.jsのドキュメントから多少の変更を加えた、実際に動作させようとしている非常に単純な例です）。グラフは、私はそれを与えているキャンバス。関連するコードはすべてここにあります。

インポートするには：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

次に、次のようにjavascriptファイルに接続します。

<script type="text/javascript" src="js/stats_tab.js"></script>

キャンバスをセットアップしました：

        <div id="graph_2015" class ="stats_box">
            <h4>Graph 2015</h4>
            Text
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>

そして最後に、stats_tab.jsに次のコードがあります。

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
}

グラフはうまく表示されますが、私が与えたキャンバスのサイズに合わせて拡大縮小することを拒否します。関係するdivのいずれにも関連するcssもありません。 chromeの検査機能により、最終的なグラフが指定した200 x 200ではなく676 x 676であることがわかります。何が起こっているのか本当にわかりません。

ありがとう！

javascriptcanvaschartschart.js
35
antonin_scalia

キャンバスに設定した幅と高さのプロパティは、Chartjsのレスポンシブモードがfalse（デフォルトではtrue）の場合にのみ機能します。 stats_tab.jsをこれに変更すると動作します。

    window.onload=function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    }
50
Duc Vu Nguyen

重要な点は次のとおりです。widthおよびheightプロパティは、ピクセル単位のサイズではなく、比率です。

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

この例では、1：1の比率です。したがって、html contenairの幅が676ピクセルの場合、チャートは676 * 675ピクセルになります
それはいくつかの一般的な間違いを説明できます。

maintainAspectRatioをfalseに設定すると、この機能を無効にできます。

35
Opsse

オプションで、maintainAspectRatioをfalseに設定し、responsiveをtrueに設定します。これは最初に、キャンバスの寸法に合わせてグラフを拡大しようとします。キャンバスが画面に収まらない場合、つまりモバイルの場合、グラフはページに収まるように再スケーリングされます。

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}
8
Kurt Van den Branden

<canvas>要素にwidthとheightが含まれていない場合 "attribute"（not css属性）。それらをそれぞれ1に設定してみてください（ちょうどその比率なので）

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>
3
Mohd Abdul Mujib

パーティーに少し遅れましたが、特に複数のチャートがあるページでは、この問題にかなり苦労しました。

この小さなヒントですべてが解決しました-私のチャートはすべてうまくフィットし、現在のdivに合わせて正確にサイズ変更されます。

これをページスタイルに追加します（8pxは個人設定です。必要に応じて変更します）。

<style type="text/css">
    #canvas-holder {
        background-color: #FFFFFF;
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
</style>

適切なDivの場合：

<div id="canvas-holder">
    <canvas id="chart-area"></canvas>
</div>
3
Darryn Frost

これ は機能するはずです。基本的に、javascriptにwidthおよびheightプロパティを追加するだけです：

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

参照： Chart.jsキャンバスのサイズ変更

3
Timothy Chen

実際の問題は、キャンバスが親に応じて再スケーリングされることです。応答性を維持したかった。したがって、次のようなものが問題を解決します。

<div style="width:50%">
    <canvas id="myChart"></canvas>
</div>
1
Sharpiro

以下は私のために働いた、と私はチャートの応答性を維持することができました！

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;
1
Joshua Schlichting

グラフが適切にサイズ変更されないというまったく同じ問題がありました。この問題を回避するために、2つのことを行いました。

  1. キャンバスタグスタイルを100％の幅と高さに設定します。これにより、常にコンテナの幅と高さの100％に収まるようになります。
  2. レスポンシブなオプション値セットの場合：true＆maintainAspectRatio：false。これにより、アスペクト比を無視して、グラフがサイズの更新に確実に応答するようになります。

以下は私が使用したコードです：

css
#myGraph {
width: 100%;
height: 100%;
}

html
<canvas id="myGraph" />

Ctxでチャートを初期化するとき、次のようにオプションを設定します。

   

 options: {
            responsive: true,
            maintainAspectRatio: false
            }

これで、画面のサイズを変更すると、それに応じてグラフのサイズが変更されます。注：グラフはそのコンテナのサイズを埋めるので、キャンバスを入れたものがそのコンテナのサイズを埋めます。

0
Ryan Forte