Chart.js - にほんご。

Tooltips

更新日: 2018-09-03

ツールチップ設定

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

名称type初期値説明
enabledbooleantrueツールチップを表示するかどうか。
customfunctionnullカスタムツールチップを参照してください。
modestringnearestツールチップに表示する項目を指定します。 詳細はこちら
intersectbooleantruetrueの場合、modeは、マウスカーソルが要素に重なっている場合にのみ適用されます。 falseの場合、modeは常に適用されます。
positionstringaverageツールチップの表示位置モード。 詳細はこちら
callbacksobjectツールチップコールバックを参照してください。
itemSortfunctionツールチップをソートします。 詳細はこちら
filterfunctionツールチップをフィルタリングします。 詳細はこちら
backgroundColorcolorrgba(0,0,0,0.8)ツールチップの背景色を指定します。
titleFontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"タイトルのフォント。
titleFontSizenumber12タイトルのフォントサイズ。
titleFontStylestringboldタイトルのフォントスタイル。
titleFontColorcolor#fffタイトルの文字色。
titleSpacingnumber2各タイトルの上下にスペースを追加します。
titleMarginBottomnumber6タイトル下部にマージンを指定します。
bodyFontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"本文のフォント。
bodyFontSizenumber12本文のフォントサイズ。
bodyFontStylestringnormal本文のフォントスタイル。
bodyFontColorcolor#fff本文の文字色。
bodySpacingnumber2ツールチップの上下にスペースを追加します。
footerFontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"フッターのフォント。
footerFontSizenumber12フッターのフォントサイズ。
footerFontStylestringboldフッターのフォントスタイル。
footerFontColorcolor#fffフッターの文字色。
footerSpacingnumber2各フッターの上下にスペースを追加します。
footerMarginTopnumber6フッターの前にマージンを指定します。
xPaddingnumber6ツールチップの左右にパディングを指定します。
yPaddingnumber6ツールチップの上下にパディングを指定します。
caretPaddingnumber2ツールチップの矢印とツールチップポイントの距離を指定します。
caretSizenumber5ツールチップの矢印のサイズをpxで指定します。
cornerRadiusnumber6ツールチップの角の半径を指定します。
multiKeyBackgroundcolor#fff複数の要素がツールチップに含まれている場合の、背景に指定する色。
displayColorsbooleantruetrueの場合、ツールチップにカラーボックスを表示します。
borderColorcolorrgba(0,0,0,0)枠線の色を指定します。
borderWidthnumber0枠線の太さを指定します。

表示位置モード

以下を指定することができます。

  • average
  • nearest

averageモードは、ツールチップに表示される項目の平均値の位置にツールチップを表示します。 nearestモードは、ツールチップに表示される項目のうち、最も近い項目の位置にツールチップを表示します。

Chart.Tooltip.positionersに関数を追加することで、新しいモードを追加することができます。

/**
 * Custom positioner
 * @function Chart.Tooltip.positioners.custom
 * @param elements {Chart.Element[]} the tooltip elements
 * @param eventPosition {Point} the position of the event in canvas coordinates
 * @returns {Point} the tooltip position
 */
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

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

デモ1

ツールチップの表示位置をモード追加して表示します。 表示位置モードはaberageと同じ処理です。

JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
        }]
    },
    options: {
      tooltips: {
            mode: 'index',
            position: 'customMode',
        }
    }
});
Chart.Tooltip.positioners.customMode = function(elements, eventPosition) {
    // 'average'と同じ処理です。
    // core.tooltip.jsを参照。
    var tooltip = this;
    if (!elements.length) {
      return false;
    }
    var i, len;
    var x = 0;
    var y = 0;
    var count = 0;
    for (i = 0, len = elements.length; i < len; ++i) {
      var el = elements[i];
      if (el && el.hasValue()) {
        var pos = el.tooltipPosition();
        x += pos.x;
        y += pos.y;
        ++count;
      }
    }
    return {
      x: Math.round(x / count),
      y: Math.round(y / count)
    };
}
HTML
<canvas id="myChart"></canvas>

ソートコールバック

ツールチップ項目をソートします。 最低限、Array.prototype.sortに渡すことの出来る関数を用意する必要があります。 この関数は、3番目のパラメータとして、チャートに渡されるデータオブジェクトを受け取ることができます。

デモ2

ソートコールバックを設定し、値が大きい方をツールチップ内の上部に表示します。

JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
        }]
    },
    options: {
      tooltips: {
            mode: 'index',
            itemSort: function(a, b, data) {
                return (b.yLabel - a.yLabel);
            },
        }
    }
});
HTML
<canvas id="myChart"></canvas>

フィルターコールバック

ツールチップ項目をソートします。 最低限、Array.prototype.filterに渡すことの出来る関数を用意する必要があります。 この関数は、3番目のパラメータとして、チャートに渡されるデータオブジェクトを受け取ることができます。

デモ3

フィルターコールバックを設定し、値が50より大きい項目のツールチップを表示します。

JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
        }]
    },
    options: {
      tooltips: {
            mode: 'index',
            filter: function(a, data) {
                return (a.yLabel > 50);
            },
        }
    }
});
HTML
<canvas id="myChart"></canvas>

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

ツールチップラベル設定は、ツールチップ設定の下にネストする形でcallbackキーを使用して設定します。 ツールチップにはテキストを使用するために、下記表に示したコールバックがあります。 全ての関数においてthisは、Chart.Tooltipコンストラクタから生成されたオブジェクトです。

全ての関数は同じ引数持っています。ツールチップ項目とチャートのデータオブジェクトです。 全ての関数はstringまたは、文字列の配列を返さなければなりません。 文字列の配列は、複数行テキストとして扱われます。

名称引数説明
beforeTitleArray[tooltipItem], dataタイトルの前に表示するテキストを返します。
titleArray[tooltipItem], dataツールチップのタイトルとして表示するテキストを返します。
afterTitleArray[tooltipItem], dataタイトルの後に表示するテキストを返します。
beforeBodyArray[tooltipItem], data本文の前に表示するテキストを返します。
beforeLabeltooltipItem, data各ラベルの前に表示するテキストを返します。 ツールチップの項目毎に呼び出されます。
labeltooltipItem, dataツールチップ内の各項目に表示するテキストを返します。
labelColortooltipItem, chartツールチップ項目を表示する色を返します。 詳細はこちら
labelTextColortooltipItem, chartツールチップのラベルの文字色を返します。
afterLabeltooltipItem, data各ラベルの後に表示するテキストを返します。
afterBodyArray[tooltipItem], data本文の後に表示するテキストを返します。
beforeFooterArray[tooltipItem], dataフッターの前に表示するテキストを返します。
footerArray[tooltipItem], dataフッターに表示するテキストを返します。
afterFooterArray[tooltipItem], dataフッターの後に表示するテキストを返します。

labelColorコールバック

例えば、ツールチップの各項目のボックスを赤にするには、以下のように指定します。

ボックスの色を赤、項目の文字を紫色にしています。

JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                labelColor: function(tooltipItem, chart) {
                    return {
                        borderColor: 'rgb(255, 0, 0)',
                        backgroundColor: 'rgb(255, 0, 0)'
                    }
                },
                labelTextColor:function(tooltipItem, chart){
                    return '#543453';
                }
            }
        }
    }
});
HTML
<canvas id="myChart"></canvas>

ツールチップ項目インターフェース

ツールチップコールバックに渡される項目は、以下のインターフェースを実装します。

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

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

    // 項目の元になるデータセットのインデックス。
    datasetIndex: Number,

    // データセット内のこの項目のインデックス。
    index: Number,

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

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

カスタムツールチップ

カスタムツールチップを使用すると、ツールチップのレンダリングプロセスにフックすることができるので、 独自の方法でツールチップを表示することができます。 通常はoncanvasの代わりにHTMLツールチップを生成します。 カスタムツールチップをグローバルまたは、チャートの設定で有効化するには、以下のように指定します。

独自のツールチップを表示します。
同様の例は、samples/tooltips/line-customTooltips.htmlを参照してください。

JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Blue", "Red", "Yellow"],
        datasets:[{
            data: [65, 59, 80],
            backgroundColor: [
                "rgb(54, 162, 235)",
                "rgb(255, 99, 132)",
                "rgb(255, 206, 86)",
            ],
        }]
    },
    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>"
                    this._chart.canvas.parentNode.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 class="chartjs-tooltip-key" style="' + style + '"></span>';
                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
                    });
                    innerHtml += '</tbody>';

                    var tableRoot = tooltipEl.querySelector('table');
                    tableRoot.innerHTML = innerHtml;
                }
                // `this`はツールチップ全体です。
                var positionY = this._chart.canvas.offsetTop;
                var positionX = this._chart.canvas.offsetLeft;

                // 表示、位置、フォントスタイル指定します。
                tooltipEl.style.opacity = 1;
                tooltipEl.style.left = positionX + tooltipModel.caretX + 'px';
                tooltipEl.style.top = positionY + tooltipModel.caretY + 'px';
                tooltipEl.style.fontFamily = tooltipModel._fontFamily;
                tooltipEl.style.fontSize = tooltipModel.fontSize;
                tooltipEl.style.fontStyle = tooltipModel._fontStyle;
                tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
            }
        }
    }
});
CSS
#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
HTML
<canvas id="myChart"></canvas>

ツールチップモデル

ツールチップモデルには、ツールチップを表示するために使用できるパラメータが含まれています。

先の例では、ツールチップモデル(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[] // 色のボックス(□型のアイコン)の前に表示するテキスト。
    // 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[],

    // 0 opacity is a hidden tooltip
    // 透明度0の場合、ツールチップが非表示になります。
    opacity: Number,
    legendColorBackground: Color,
    displayColors: Boolean,
}

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。