Chart.jsでグラフサイズを指定する方法

Chart.jsを利用してグラフ描画ページの構成を行っております。
グラフが画面いっぱいに描画されてしまうため、
画像サイズを小さく調整したいのですが、下記のheightとwidthの値を変更しても、
画面いっぱいに拡大されてしまいます。
<canvas id="myChart2" style="position: relative; height:100vh; width:150vw"></canvas>

グラフのサイズを小さく指定するには、どうすれば良いでしょうか。
グラフを小さく設定して、他にボタンを並べる予定です。

よろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>
 
<meta charset="utf-8">

<meta name="description" content="">

<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="">

<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<link rel="shortcut icon" href="">


    <head>
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    </head>

    <canvas id="hogehoge" style="position: relative; height:100vh; width:150vw"></canvas>
    <script>
    var ctx = document.getElementById("hogehoge");
    var data = {
        labels: [1,2,3],
        datasets: [
            {
                label: "",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgb(5,141,199)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgb(5,141,199)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [163,160,161],
                spanGaps: false,
            }
        ]
    };
    var myChart = new Chart(ctx, {
        type: 'line',
        data: data
        
    });
    </script>
</body>


</html>

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1
2<canvas id="myChart2" style="position: relative; height:100; width:150"></canvas>

にしたら設定出来ると思います。

chartjs.orgに

When it comes to change the chart size based on the window size, a major limitation is that the canvas render size (canvas.width and .height) can not be expressed with relative values, contrary to the display size

と書いてあるので相対サイズを使うのであればjavascriptを組んで

javascript
1
2var c=document.getElementById("myChart2");
3c.width=window.innerWidth*0.1;
4c.height=window.innerHeight*0.1;
5

みたいな感じで設定すれば良いと思います（innerWidthが適切かどうかは分かりません）

投稿2018/12/30 08:52

編集2018/12/30 08:53

bochan2

総合スコア2050

IC445

2018/12/30 08:59

下記のように修正いたしましたが、変わりませんでした。グラフのサイズ自体を小さく設定したいと考えております。 <canvas id="myChart2" style="position: relative; height:100; width:150"></canvas> <script> var ctx = document.getElementById("myChart2"); ctx.width=window.innerWidth*0.1; ctx.height=window.innerHeight*0.1;