Options

scriptableオプション

スクリプト可能(scriptable)オプションは 各データに対して呼び出される関数を適用します。 この関数は、一意なパラメータであるcontextを受け取ります。 (オプションコンテキストを参照)

color: function(context) {
    var index = context.dataIndex;
    var value = context.dataset.data[index];
    return value < 0 ? 'red' :  // マイナス値なら'red'
        index % 2 ? 'blue' :    // それ以外は'blue'か'green'
        'green';
}

注意：スクリプト可能オプションは、バブルチャートのいくつかのオプションでのみ適用可能です。

デモ

アイテムの色をfunctionで生成しています。
x、yどちらもマイナス値の場合に赤で表示します。 それ以外は、インデックスが奇数なら青、偶数なら緑で表示します。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
function setBorderColor(context) {
    return setColor(context, 'border')
}
function setBgColor(context) {
    return setColor(context, 'bg')
}
function setColor(context, type) {
    var index = context.dataIndex;
    var value = context.dataset.data[index];
    var opaque = type === 'bg' ? 0.2 : 1;
    return value.x < 0 && value.y < 0 ? 'rgba(255, 99, 132, ' + opaque + ')' :  // マイナス値なら'red'
        index % 2 ? 'rgba(54, 162, 235, ' + opaque + ')' :    // それ以外は'blue'か'green'
        'rgba(75, 192, 192, ' + opaque + ')';
}
new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets:[{
            data: [
                {x: -44, y:  87, r:  8},
                {x:  10, y:  10, r: 16},
                {x:  77, y:  29, r: 13},
                {x:  40, y: -62, r: 14},
                {x:  83, y:  21, r: 21},
                {x: -78, y:  51, r: 10},
                {x:  21, y:  46, r: 12},
                {x:  35, y: -43, r:  5},
                {x: -10, y: -59, r: 16},
                {x: -23, y: -32, r: 20},
            ],
            backgroundColor: setBgColor,
            borderColor: setBorderColor,
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        }
    }
})

HTML

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

indexableオプション

インデックス可能(indexable)オプションは、 各データと同じインデックスに対応する要素を持った配列も指定することができます。 このメソッドは、データと同じ数の要素を持った配列を指定する必要があります。 そのため、functionがサポートされているならば、functionを使った方が良いでしょう。

color: [
    'red',    // dataのindexが0の色
    'blue',   // dataのindexが1の色
    'green',  // dataのindexが2の色
    'black',  // dataのindexが3の色
    //...
]

デモ

チャートを赤、青、黄色、緑、紫、オレンジの6色で表示しています。

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets:[{
            data: [
                {x: -44, y:  87, r:  8},
                {x:  10, y:  10, r: 16},
                {x:  77, y:  29, r: 13},
                {x:  40, y: -62, r: 14},
                {x:  83, y:  21, r: 21},
                {x: -78, y:  51, r: 10},
                {x:  21, y:  46, r: 12},
                {x:  35, y: -43, r:  5},
                {x: -10, y: -59, r: 16},
                {x: -23, y: -32, r: 20},
            ],
            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)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 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)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        }
    }
})

HTML

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

オプションコンテキスト

オプションコンテキストは、 オプション解決の際に、オプションのコンテキストを渡す為に使われます。 今はスクリプト可能オプションでのみ適用可能です。

コンテキストオブジェクトは以下のプロパティが含まれています。

• chart : 関連するチャート。
• dataIndex : 現在のデータのindex。
• dataset : indexのデータセット。datasetIndex
• datasetIndex : 現在のデータセットのindex。

重要：コンテキストは様々な種類のエンティティ(dataset、data等)が存在するため、 一部のプロパティはundefinedになる場合があります。 そのため、コンテキストのプロパティを使う前には必ず中身を確認してください。