Chart.jsをいじってみる

Scripts n StylesというWordPressでゴリゴリJavaScriptを書けるプラグインを入れたので、安易にChart.jsをCDNで使ってみたいと思います。

WordPressの投稿の中でcanvasタグをいれると「ビジュアル←→テキスト」でタグが消えてしまったりするので、JavaScriptでDOMを入れ込むようにしてみました。

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

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

jQuery(function($){
    // canvasの設置
    $('.article #the-content').prepend('<div class="container" style="width:100%"><canvas id="myChart"></canvas></div>');
    
    var ctx = $('#myChart');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '得票数',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options:{
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
});

jQuery(function($){

// canvasの設置

$('.article #the-content').prepend('<div class="container" style="width:100%"><canvas id="myChart"></canvas></div>');

var ctx = $('#myChart');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

datasets: [{

label: '得票数',

data: [12, 19, 3, 5, 2, 3],

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(255, 159, 64, 0.2)'

borderColor: [

'rgba(255,99,132,1)',

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)',

'rgba(153, 102, 255, 1)',

'rgba(255, 159, 64, 1)'

borderWidth: 1

}]

options:{

scales: {

yAxes: [{

ticks: {

beginAtZero: true

}

}]

}

});

Chart.jsの公式のドキュメントのUsageにこんな情報がありました。

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here’s an example.

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

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

// Any of the following formats may be used
var ctx = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
var ctx = $("#myChart");
var ctx = "myChart";

// Any of the following formats may be used

var ctx = document.getElementById("myChart");

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

var ctx = $("#myChart");

var ctx = "myChart";

つまり、ctxオブジェクトの差異をChartクラスが吸収してくれるというわけです。 😎

ただ、サンプルをベタ打ちしておいてなんですが、バーの色がそれぞれ変えることに意味はない上に、利便性が下がるので、スタイルは1つにします。

そして、ラベルとデータの数が揃っていないとエラーになるので、ここは別のメソッドにまとめて設定しておきます。

jQuery(function($){
    // canvasの設置
    $('.article #the-content').append('<div class="container" style="width:100%"><canvas id="mizChart"></canvas></div>');
    
    var dataSet = function(){
        var tmpArray = {label:[], data:[]};
        tmpArray.label = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
        tmpArray.data = [12, 19, 3, 5, 2, 3];
        return tmpArray;
    };
    var mizCtx = $('#mizChart');
    var mizChart = new Chart(mizCtx, {
        type: 'bar',
        data: {
            labels: dataSet().label,
            datasets: [{
                label: '得票数',
                data: dataSet().data,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1
            }]
        },
        options:{
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
});

jQuery(function($){

// canvasの設置

$('.article #the-content').append('<div class="container" style="width:100%"><canvas id="mizChart"></canvas></div>');

var dataSet = function(){

var tmpArray = {label:[], data:[]};

tmpArray.label = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];

tmpArray.data = [12, 19, 3, 5, 2, 3];

return tmpArray;

};

var mizCtx = $('#mizChart');

var mizChart = new Chart(mizCtx, {

type: 'bar',

data: {

labels: dataSet().label,

datasets: [{

label: '得票数',

data: dataSet().data,

backgroundColor: 'rgba(255, 99, 132, 0.2)',

borderColor: 'rgba(255,99,132,1)',

borderWidth: 1

}]

options:{

scales: {

yAxes: [{

ticks: {

beginAtZero: true

}

}]

}

});

これだと、ただ表示しているだけなので、今度はボタン押下で表示データの変更を行なうようにします。

jQuery(function($){
    var getRandomInt = function(max){
        return Math.floor(Math.random() * Math.floor(max));
    }
    var dataSet = function(arg){
        var tmpArray = {label:[], data:[]};
        if(!arg){
            tmpArray.label = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
            tmpArray.data = [12, 19, 3, 5, 2, 3];
        }
        else if(arg == "random"){
            tmpArray.label = ["赤", "青", "黄", "緑", "紫", "橙"];
            tmpArray.data = [getRandomInt(20), getRandomInt(20), getRandomInt(20), getRandomInt(20), getRandomInt(20), getRandomInt(20)];
        }
        return tmpArray;
    };
    
    // canvasの設置
    $('.article #the-content').append('<div class="container" style="width:100%"><canvas id="mizChart"></canvas></div>');
    
    var mizCtx = $('#mizChart');
    var mizChart = new Chart(mizCtx, {
        type: 'bar',
        data: {
            labels: dataSet().label,
            datasets: [{
                label: '得票数',
                data: dataSet().data,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1
            }]
        },
        options:{
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    // ボタン設置
    $('.article #the-content').append('<button id="mizBtn">データ更新</button>');
    $('#mizBtn').on('click', function(){
        mizChart.data.labels = dataSet("random").label;
        mizChart.data.datasets[0].data = dataSet("random").data;
        mizChart.update();
    });
});

jQuery(function($){

var getRandomInt = function(max){

return Math.floor(Math.random() * Math.floor(max));

}

var dataSet = function(arg){

var tmpArray = {label:[], data:[]};

if(!arg){

tmpArray.label = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];

tmpArray.data = [12, 19, 3, 5, 2, 3];

}

else if(arg == "random"){

tmpArray.label = ["赤", "青", "黄", "緑", "紫", "橙"];

tmpArray.data = [getRandomInt(20), getRandomInt(20), getRandomInt(20), getRandomInt(20), getRandomInt(20), getRandomInt(20)];

}

return tmpArray;

};

// canvasの設置

$('.article #the-content').append('<div class="container" style="width:100%"><canvas id="mizChart"></canvas></div>');

var mizCtx = $('#mizChart');

var mizChart = new Chart(mizCtx, {

type: 'bar',

data: {

labels: dataSet().label,

datasets: [{

label: '得票数',

data: dataSet().data,

backgroundColor: 'rgba(255, 99, 132, 0.2)',

borderColor: 'rgba(255,99,132,1)',

borderWidth: 1

}]

options:{

scales: {

yAxes: [{

ticks: {

beginAtZero: true

}

}]

}

});

// ボタン設置

$('.article #the-content').append('<button id="mizBtn">データ更新</button>');

$('#mizBtn').on('click', function(){

mizChart.data.labels = dataSet("random").label;

mizChart.data.datasets[0].data = dataSet("random").data;

mizChart.update();

});

なぜ、関数ではなくメソッドにしているのか・・・趣味です。 😆 関数と違って宣言している位置が重要になりますのでお気をつけください。（なぜ関数にしなかったし。 😯 ）

ソースを見ての通りappendで挿入していますので、この記事の一番下にサンプルが表示されています。

Chart.jsをいじってみる

関連記事

コメントを残すコメントをキャンセル