Chart.js で日本語を使う

19805 ワード
chart.js 日本語 日本語 テキストリンク

Chart.js でこんなグラフを書いてみました。
日本語を使っているところがポイントです。

<!DOCTYPE html>
<head lang="ja">
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="ex02.js"></script>
<script src="draw_line_chart.js"></script>
</head>
<body>
    <canvas id="chart_aa" width="400" height="40"></canvas>
    <canvas id="chart_bb" width="400" height="200"></canvas>
    <canvas id="chart_cc" width="400" height="20"></canvas>
<p />
<p />
    <canvas id="chart_dd" width="400" height="40"></canvas>
    <canvas id="chart_ee" width="400" height="200"></canvas>
    <canvas id="chart_ff" width="400" height="20"></canvas>
<p />
<hr />
Version: Jan/31/2019 AM 08:25<p />
</body>
ex02.js
// -----------------------------------------------------------------------
/*
    ex02.js

                    Jan/17/2018
*/
// -----------------------------------------------------------------------
jQuery (function ()
{
const data_aa = [
    {x: 0.0,y: 4.5 },
    { x: 1.1, y: 7.2 },
    { x: 2.3, y: 5.6 },
        { x: 3.4, y: 7.4 },
        { x: 4.2, y: 6.4 },
        { x: 6.2, y: 3.2 },
        { x: 8.4, y: 4.3 },
        { x: 10.5, y: 15.2 },
        { x: 20.6, y: 5.7 }]


    draw_line_chart_proc ("chart_bb",data_aa,0,24)

const data_bb = [
    {x: 0.0,y: 14.5 },
    { x: 1.1, y: 7.2 },
    { x: 2.3, y: 15.6 },
        { x: 3.4, y: 7.4 },
        { x: 4.2, y: 6.4 },
        { x: 7.2, y: 9.4 },
        { x: 9.2, y: 8.4 },
        { x: 16.2, y: 17.2 },
        { x: 18.4, y: 14.3 }
    ]

    draw_line_chart_proc ("chart_ee",data_bb,0,20)

    var id_chart = "chart_aa"
    draw_character_yy (id_chart,"気温","°C")

    id_chart = "chart_cc"
    draw_character_xx (id_chart)

    id_chart = "chart_dd"
    draw_character_yy (id_chart,"湿度","%")

    id_chart = "chart_ff"
    draw_character_xx (id_chart)
})

// -----------------------------------------------------------------------
draw_line_chart.js
// -----------------------------------------------------------------------
/*
    draw_line_chart.js

                        Jan/17/2018
*/
// -----------------------------------------------------------------------
function draw_line_chart_proc (id_chart,data_aa,ymin,ymax)
{
const options_aa = {
     legend: { display: false },
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
        ticks: { min: 0, max: 24, stepSize: 3}
        }],
            yAxes: [{
                type: 'linear',
                position: 'bottom',
        ticks: { min: ymin, max: ymax}
        }]
        }
    }


var ctx = jQuery("#" + id_chart)

var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
        tension: 0,
        fill: false,
        pointRadius: 0,
        borderWidth: 0,
        backgroundColor: "blue",
        borderColor: "blue",
        data: data_aa
        }]
        },
    options: options_aa
})

}

// -----------------------------------------------------------------------
function draw_character_xx (id_chart)
{
    var ctx = jQuery("#" + id_chart)[0].getContext('2d')

    ctx.font = "12px 'ＭＳ Ｐゴシック'";
    ctx.fillStyle = "black";
    ctx.fillText("時刻", 300, 15);
}

// -----------------------------------------------------------------------
function draw_character_yy (id_chart,label_aa,unit_aa)
{
    var ctx = jQuery("#" + id_chart)[0].getContext('2d')

    ctx.font = "12px 'ＭＳ Ｐゴシック'";
    ctx.fillStyle = "black";
    ctx.fillText(label_aa, 5, 15);
    ctx.fillText(unit_aa, 5, 35);

    ctx.font = "18px 'ＭＳ Ｐゴシック'";
    ctx.fillText(label_aa, 300, 25);
}

// -----------------------------------------------------------------------