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

目次

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

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

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

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

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

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

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; 

 でいけました。

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

 

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

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

まずは、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

今回はこんなところで。

ではでは。