ツールチップ

ツールチップ設定

ツールチップの設定は options.tooltips名前空間に渡します。チャートツールチップのグローバルオプションは Chart.defaults.global.tooltipsで定義されています。

位置モード

設定可能なモードpositionは次のとおりです。

• 'average'
• 'nearest'

'average' モードでは、ツールチップを、ツールチップに表示されるアイテムの平均位置に置きます。 'nearest'では、イベントの位置に最も近い要素の位置にツールチップを配置します。

新しいモードは、関数をChart.Tooltip.positionersマップに追加することで定義できます。

例:

/**
 * カスタム positioner
 * @function Chart.Tooltip.positioners.custom
 * @param elements {Chart.Element[]} ツールチップの要素
 * @param eventPosition {Point} キャンバス座標のイベントの位置
 * @returns {Point} ツールチップの位置
 */
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: 0,
        y: 0
    };
}

ソートコールバック

ツールチップアイテムのソートを許可します。少なくとも Array.prototype.sortに渡すことができる関数を実装する必要があります。この関数は、チャートに渡されるデータオブジェクトを3番目のパラメータとして受け取ることもできます。

フィルタコールバック

ツールチップアイテムのフィルタリングを許可します。少なくともArray.prototype.filterに渡すことができる関数を実装する必要があります。この関数は、グラフに渡されるデータオブジェクトを2番目のパラメータとして受け取ることもできます。

ツールチップコールバック

ツールチップのラベル設定は、callbacksキーを使用してツールチップ設定の下にネストされます。 ツールチップには、テキストを提供するための以下のコールバックがあります。すべての関数で、'this'はChart.Tooltipコンストラクタから作成されたツールチップオブジェクトになります。

すべての関数は、同じ引数で呼び出されます。つまり、ツールチップアイテムと、チャートに渡されるデータオブジェクトです。すべての関数は、文字列または文字列の配列のいずれかを返す必要があります。文字列の配列は、複数行のテキストとして扱われます。

ラベルカラーコールバック

たとえば、ツールチップの各項目に対し赤いボックスを返すには、次のようにします。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                labelColor: function(tooltipItem, chart) {
                    return {
                        borderColor: 'rgb(255, 0, 0)',
                        backgroundColor: 'rgb(255, 0, 0)'
                    }
                },
                labelTextColor:function(tooltipItem, chart){
                    return '#543453';
                }
            }
        }
    }
});

ツールチップアイテムインタフェース

ツールチップコールバックに渡すツールチップアイテムには、次のインターフェイスを実装します。

{
    // ツールチップのX値を文字列で
    xLabel: String,

    // ツールチップのY値を文字列で
    yLabel: String,

    // 項目が属するデータセットのインデックス
    datasetIndex: Number,

    // データ項目のデータセット中でのインデックス
    index: Number,

    // マッチングポイントのX位置
    x: Number,

    // マッチングポイントのY位置
    y: Number,
}

外部カスタムツールチップ

カスタムツールチップを使用すると、ツールチップのレンダリングプロセスをフックすることができ、独自の方法でツールチップをレンダリングできます。一般的に、これはキャンバス上のツールチップではなくHTMLツールチップを作成するために使用されます。カスタムツールチップをグローバル設定またはチャートの設定で有効にするには、次のようにします。

var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        tooltips: {
            // キャンバス上のツールチップを無効にする
            enabled: false,

            custom: function(tooltipModel) {
                // ツールチップ要素
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // 最初のレンダリング時に要素を作成する
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = "<table></table>";
                    document.body.appendChild(tooltipEl);
                }

                // ツールチップがない場合は非表示にします
                if (tooltipModel.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // キャレット(ツールチップが指し示すもの)の位置を設定する
                tooltipEl.classList.remove('above', 'below', 'no-transform');
                if (tooltipModel.yAlign) {
                    tooltipEl.classList.add(tooltipModel.yAlign);
                } else {
                    tooltipEl.classList.add('no-transform');
                }

                function getBody(bodyItem) {
                    return bodyItem.lines;
                }

                // テキストを設定する
                if (tooltipModel.body) {
                    var titleLines = tooltipModel.title || [];
                    var bodyLines = tooltipModel.body.map(getBody);

                    var innerHtml = '<thead>';

                    titleLines.forEach(function(title) {
                        innerHtml += '<tr><th>' + title + '</th></tr>';
                    });
                    innerHtml += '</thead><tbody>';

                    bodyLines.forEach(function(body, i) {
                        var colors = tooltipModel.labelColors[i];
                        var style = 'background:' + colors.backgroundColor;
                        style += '; border-color:' + colors.borderColor;
                        style += '; border-width: 2px';
                        var span = '<span style="' + style + '"></span>';
                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }

                // `this` はツールチップ全体です
                var position = this._chart.canvas.getBoundingClientRect();

                // 表示、配置、およびフォントスタイルの設定
                tooltipEl.style.opacity = 1;
                tooltipEl.style.position = 'absolute';
                tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
                tooltipEl.style.fontSize = tooltipModel.bodyFontSize;
                tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
                tooltipEl.style.pointerEvents = 'none';
            }
        }
    }
});

カスタムツールチップを使用してみる場合は、例としてsamplesを参照してください。

ツールチップモデル

ツールチップモデルtooltipModelには、ツールチップのレンダリングに使用できるパラメータが含まれています。

{
    // ツールチップ内にレンダリングしているアイテム。 「ツールチップアイテムインターフェイス」セクションを参照してください。
    dataPoints: TooltipItem[],

    // 位置
    xPadding: Number,
    yPadding: Number,
    xAlign: String,
    yAlign: String,

    // X の Y のプロパティはツールチップの左上を指します
    x: Number,
    y: Number,
    width: Number,
    height: Number,
    // ツールチップが指し示す場所
    caretX: Number,
    caretY: Number,

    // 本文
    // レンダリングが必要な本文
    // 各オブジェクトは 3つのパラメータを持ちます
    // before: String[] // 色の正方形(color square)の行の前のテキスト行
    // lines: String[], // 色の正方形とともに主項目としてレンダリングするテキスト行
    // after: String[], // 主項目の後にレンダリングするテキスト行
    body: Object[],
    // タイトルの後、本文の前に現れるテキストの行
    beforeBody: String[],
    // 本文の後ろかつ、フッターの前に現れるテキストの行
    afterBody: String[],
    bodyFontColor: Color,
    _bodyFontFamily: String,
    _bodyFontStyle: String,
    _bodyAlign: String,
    bodyFontSize: Number,
    bodySpacing: Number,

    // タイトル
    // タイトルを構成するテキストの行
    title: String[],
    titleFontColor: Color,
    _titleFontFamily: String,
    _titleFontStyle: String,
    titleFontSize: Number,
    _titleAlign: String,
    titleSpacing: Number,
    titleMarginBottom: Number,

    // フッター
    // フッターを構成するテキストの行
    footer: String[],
    footerFontColor: Color,
    _footerFontFamily: String,
    _footerFontStyle: String,
    footerFontSize: Number,
    _footerAlign: String,
    footerSpacing: Number,
    footerMarginTop: Number,

    // 外観
    caretSize: Number,
    cornerRadius: Number,
    backgroundColor: Color,

    // body[]内の各項目にレンダリングする色。これはツールチップの四角形の色です
    labelColors: Color[],

    // opacity 0 でツールチップは非表示
    opacity: Number,
    legendColorBackground: Color,
    displayColors: Boolean,
}