web-dev-qa-db-ja.com

Chart.js 2.0：ツールチップのタイトルを変更する方法

時々下手な英語を許して下さい。私の母国語はオランダ語です。

メインパワースマートメーターから報告されたエネルギー使用量を示すChart.jsラインチャートを作成しました。ほぼ思い通りに動いているのですが、細かいことがわからないため、思い通りに動かせないことがあります。

トピックでユーザー "iecs"の助けを借りて "Chart.js V2：プレフィックスまたはサフィックスをツールチップラベルに追加" ツールチップでラベルを変更することができました。これで、目的の接頭辞と接尾辞がうまく表示されます。

tooltips: {
    enabled: true,
    mode: 'single',
    backgroundColor: 'rgba(0,0,0,0.9)',
    titleFontSize: 14,
    titleFontStyle: 'bold',
    titleFontColor: "#FFF",
    bodyFontSize: 12,
    bodyFontStyle: 'normal',
    bodyFontColor: "#FFF",
    footerFontSize: 12,
    footerFontStyle: 'normal',
    footerFontColor: "#FFF",
    cornerRadius: 5,
    callbacks: {
        label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
        }
    }
}

まったく同じコードを追加してタイトルを変更しようとすると、日時が表示される場所にundefinedが表示されます。

tooltips: {
    enabled: true,
    mode: 'single',
    backgroundColor: 'rgba(0,0,0,0.9)',
    titleFontSize: 14,
    titleFontStyle: 'bold',
    titleFontColor: "#FFF",
    bodyFontSize: 12,
    bodyFontStyle: 'normal',
    bodyFontColor: "#FFF",
    footerFontSize: 12,
    footerFontStyle: 'normal',
    footerFontColor: "#FFF",
    cornerRadius: 5,
    callbacks: {
        title: function(tooltipItems, data) {
            //Return value for title
            return 'Date: ' + tooltipItems.xLabel + ' GMT+2';
        },
        label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
    }
}

トピックでのユーザー「Lukman」の回答 "JavaScriptオブジェクトのコンテンツを印刷しますか？[duplicate]" 「tooltipItemsオブジェクト」のコンテンツを表示できることがわかりました：

alert(tooltipItems.toSource())

これにより、「タイトル」と「ラベル」の間の「tooltipItems」オブジェクトに関する興味深い違いが表示されました。

「ラベル」の「tooltipItems」オブジェクトは、これをコンテンツとして表示します。

({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})

「タイトル」の「tooltipItems」オブジェクトはこれをコンテンツとして表示しますが、

[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]

開始文字と終了文字が異なります。 「ラベル」はtooltipItems.yLabelで読み取ることができますが、「タイトル」はtooltipItems.xLabelで読み取ることができません。タイトル全体がDate: undefined GMT+2のDate: 2016-08-07 23:41:57 GMT+2のインスタンスになります。

何を間違えたのですか？ 「tooltipItems」のオブジェクトコンテンツの2つの出力の違いと、「xLabel」インデックスと「yLabel」インデックスの読み方を誰かが説明してもらえますか？

javascriptphpjqueryhtmlchart.js
24
Jeroen Maathuis

私も同様の問題に遭遇しましたが、これで解決しました。

return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';
19
Ryo