"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

JavaScriptでグラフを描けるChart.jsで縦横同じサイズの散布図を描く

f:id:arakan_no_boku:20200422010037p:plain

目次

Chart.jsで縦横同じサイズの散布図を描く

JavaScriptでグラフを描くのに、Chart.jsを使います。

やりたいことは樹形図グラフを縦横同じサイズにしたいだけです。

 

デフォルトでは横長になります

canvasのデフォルト(幅300px、高さ150px)のバランスは以下のように横長です。

f:id:arakan_no_boku:20200423002623p:plain

これを縦横サイズが同じ真四角の散布図を描く方法を探しました。

 

chart.canvas.parentNode.style.を使うとエラーに

まずは、canvasのサイズ指定についてこちらで調べました。

misc.0o0o.org

こちらに、このような記述があったので。

プログラムでコンテナサイズを変更することでも、チャートサイズを変更することができます。

chart.canvas.parentNode.style.height = '128px';

これを見て、javascript内で「chart.canvas.parentNode.style.height 」および「width」に指定すればコントロールできると思ったのですが、見事にエラーになりました(笑)。

Uncaught ReferenceError: chart is not defined

あれあれ。

 

コンテキストを使えばいけました

結局、

HTML側で

<canvas id="myChart"></canvas>

と定義したものをJavaScript側で

var ctx = document.getElementById('myChart').getContext('2d');

のように、コンテキストを取得してやればよかったみたいです。

肝心の、canvasのサイズ指定は

ctx.canvas.width=500;
ctx.canvas.height=500; 

 でいけました。

この結果、以下のような正方形のグラフにできました。

 

f:id:arakan_no_boku:20200422220124p:plain 

ま・・、今回はこれだけのことです。

 

参考:上記サンプルを描いたソースです

まずは、HTML部分の抜粋です。

<div class="mycanvas">
    <canvas id="myChart"></canvas>
</div>
<script type="text/javascript" src="{% static "js/scatter01.js" %}"></script>

mycanvasクラスはCSSで以下のように定義してます。 

.mycanvas
{
width:500px;
height:500px;
}

{% static "js/scatter01.js" %}という書き方は、djangoのテンプレートからコピーしてきたからなので、django以外の環境だと適切な相対パスに書き換えてください。

後述するJavaScriptを「scatter01.js」という名前で保存し、それを<script>で読み込んでいます。

canvasのID「MyChart」は、JavaScriptセレクタで指定するためのものです。

今度は、JavaScript部分(scatter01.js)です。

window.chartColors = {
    red: "#FF0000",
    blue: "#00FF00"
};

var color = Chart.helpers.color;
function generateData() {
    var data = [];
    for (var i = 0; i < 120; i++) {
        data.push({
            x: Math.floor( Math.random()*100 ),
            y: Math.floor( Math.random()*100 )
        });
    }
    return data;
}

var scatterChartData = {
    datasets: [{
        label: 'dummy dataset',
        borderColor: window.chartColors.red,
        backgroundColor: window.chartColors.red,
        pointRadius: 3,
        data: generateData()
    }]
};

window.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    ctx.canvas.width=500;
    ctx.canvas.height=500;
    window.myScatter = Chart.Scatter(ctx, {
        data: scatterChartData,
        options: {
            title: {
                display: true,
                text: 'Chart.js Scatter Chart'
            },
            scales: {
                xAxes: [{
                    gridLines: {                       // 補助線(縦線)
                        color: "rgba(255, 0, 0, 0.2)",   // 補助線の色
                        zeroLineColor: "black"           // x=0時の(縦線の色)
                    },
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        max: 100,
                    },
                }],
                yAxes: [{
                    gridLines: {                       // 補助線(縦線)
                        color: "rgba(255, 0, 0, 0.2)",   // 補助線の色
                        zeroLineColor: "black"           // x=0時の(縦線の色)
                    },
                    ticks: {
                        beginAtZero: true,
                        min: 0,
                        max: 100,
                        stepSize: 10,
                    },
                }],

            },
        }
    });
};

とりあえずサンプルなので、データは「Math.floor( Math.random()*100 )」で0から99迄の乱数を発生させて作ってます。

あと、軸の設定まわり(scalesとかxAxesとか)の説明は、こちらにあります。

misc.0o0o.org

今回はこんなところで。

ではでは。