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);
}

这是我尝试合并x轴标签的回调函数，正如@GRUNT所建议的：

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
};

目前，当我悬停在我的柱状图上时，我得到的是总利润：1399.3，对于折线图，则是 销售数量：40。这不是我想要的输出结果。

有什么办法可以覆盖工具提示悬停自定义吗？

谢谢！

- QWERTY

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);
      }
   }
}

此外，你的第一份数据集应该是用于折线图表的，其次是柱状图表，像这样：

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

工作示例 ⧩

请注意，这是一条标题。

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>

- ɢʀᴜɴᴛ

---

没问题！！ - ɢʀᴜɴᴛ

@GRUNT 你好，你能帮我看一下这个吗？我在chart.js图例自定义方面遇到了一些问题！ - QWERTY