web-dev-qa-db-ja.com

Chart.js multiTooltipラベル

ツールチップで各データセットのラベル名を表示するcharts.jsを取得しようとしています。

私のコード：

var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [

        {
            label: "Bob",
            fillColor : "rgba(88,196,246,0.5)",
            strokeColor : "rgba(88,196,246,0.8)",
            highlightFill: "rgba(88,196,246,0.75)",
            highlightStroke: "rgba(88,196,246,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "Tina",
            fillColor : "rgba(74,211,97,0.5)",
            strokeColor : "rgba(74,211,97,0.8)",
            highlightFill : "rgba(74,211,97,0.75)",
            highlightStroke : "rgba(74,211,97,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }

    ]
}

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Line(barChartData, {
    responsive : true,
    animation: true,
    barValueSpacing : 5,
    barDatasetSpacing : 1,
    tooltipFillColor: "rgba(0,0,0,0.8)",                
    multiTooltipTemplate: "<%= label %> - <%= value %>"

});

上記のコードでは、「January」の上にカーソルを合わせるとツールチップが表示されます。

January
January - xx
January - xx

以下を表示するにはどうすればよいですか？

January
Bob - xx
Tina - xx
javascriptchart.js
59
Alosyius

変化する

window.myBar = new Chart(ctx).Line(barChartData, {
   responsive : true,
   animation: true,
   barValueSpacing : 5,
   barDatasetSpacing : 1,
   tooltipFillColor: "rgba(0,0,0,0.8)",                
   multiTooltipTemplate: "<%= label %> - <%= value %>"
});

に：

window.myBar = new Chart(ctx).Line(barChartData, {
   responsive : true,
   animation: true,
   barValueSpacing : 5,
   barDatasetSpacing : 1,
   tooltipFillColor: "rgba(0,0,0,0.8)",                
   multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
});

変更は最後の行にあります

multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

datasetLabelはデータセットオブジェクト（この場合は 'Bob'と 'Tina'）からラベルの値を取得しますが、labelはx軸（labels配列の一部）に表示されるキャプションを取得します

132
MBaig

私は長い間探していたので、答えを更新したいです。

オプション内のツールチップ設定を変更できるようになりました。 Docuを参照してください： http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

質問については、すべてのXデータを表示します。

window.myBar = new Chart(ctx).Line(barChartData, {
  tooltips: {
   mode: 'label'
 }           
});

乾杯ハンネス

9
Hannes Oberreiter

here と答えたように、multiTooltipTemplateに関数を指定できます。 'debugger'を使用してその関数内にブレークポイントを配置し、必要なすべてのプロパティについて指定されたオブジェクトを探索します。次に、ツールチップに表示される文字列を作成します。

multiTooltipTemplate: function(v) {debugger; return someManipulation(v);}
tooltipTemplate: function(v) {return someOtherManipulation(v);}
1
Ariel Cabib

Hannesの答えに似ていますが、それ以来ドキュメントが更新されています-現在、さまざまなオプションがあり、彼が提供したリンクは廃止されたため、どこにも行きません。

見つけるのに時間がかかったので、新しい答えを追加しています。

これはxモードです-x軸に基づいてツールチップに複数のデータセット情報を表示します

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

http://www.chartjs.org/docs/latest/general/interactions/modes.html#x

「y」モードもあります。ラベルモードは廃止されました。

「ポイント」、「インデックス」、「最近接」モードを使用することもできます。

0
Jonathan Wood