混合图表的Chart.js工具提示悬停定制

Question

尝试使用chart.js为混合图表自定义悬停工具提示时遇到问题。

我有一个条形图，用于显示某些产品的总利润，以及一个折线图，用于显示该特定产品的总数量。 当我将鼠标悬停在条形图上时，我希望工具提示显示如下内容：

Total profit: $ 1399.30

价格应为两位小数格式，并附加在“总利润：$”后面。 当我将鼠标悬停在折线图上时，我想显示以下内容：

Quantity sold: 40 unit(s)

这是我的代码来填充相关数组：

for(var i = 0 ; i < topProductList.length; i++){
    labelData.push(topProductList[i].itemName);
    amountData.push((topProductList[i].price * topProductList[i].quantity).toFixed(2));
    quantityData.push(topProductList[i].quantity);
}

我试图按照@GRUNT的建议合并回x轴标签的回调：

tooltips: {
     callbacks: {
        title: function(t, d) {
             return d.labels[t[0].index].replace(/\n/, ' ');
        }
     }
}

我的图表的选项：

var opt = {
    type: "bar",
    data: { 
        labels: labelData, 
        datasets: [{ 
                type: "bar",
                label: 'Total Profit ',
                data: amountData, 
                },{
                type: "line",
                label: 'Quantity Sold ',
                data: quantityData, 
                }] 
        }, 
        options: options
};

现在，当我将鼠标悬停在条形图上时，我会得到Total profit: 1399.3 ，对于折线图， Quantity sold: 40 ，这不是我上面期望的输出。

任何想法如何覆盖工具提示悬停自定义？

谢谢！

Answer 1

您可以使用以下工具提示的标签的回调函数，用于在不同的图形徘徊时，表现出不同的工具提示标签：

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel;
         // if line chart
         if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
         // if bar chart
         else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
      }
   }
}

同样，您的第一个数据集应为line图，然后为bar ，如下所示：

datasets: [{
   type: "line",
   label: 'Quantity Sold ',
   data: quantityData
}, {
   label: 'Total Profit ',
   data: amountData
}]

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

 var chart = new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ type: "line", label: 'Quantity Sold', data: [40, 50, 60, 70, 80], borderColor: 'orange', fill: false }, { label: 'Total Profit', data: [1399.3, 356.62, 1249, 465.23, 1480.4], backgroundColor: 'rgba(0, 119, 220, 0.4)', }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, tooltips: { callbacks: { label: function(t, d) { var xLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel; // if line chart if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)'; // if bar chart else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2); } } } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> <canvas id="ctx"></canvas>