Javascript Chart.js（自定义堆叠条的工具提示以表示每个堆叠数据）

我正在尝试实现一个定制的Chart.js工具提示，我一直在使用堆叠的条，在工具提示上为每个堆叠的条显示相同的数据。我需要为每个堆叠条的每个工具提示提供不同的数据

在下表中，例如第2天，条形图中的堆栈均显示平均值34。在我使用的自定义工具提示中，它们是否可以在同一个栏中，但具有不同的值？比如一个说34，另一个说43

如有任何方向正确的帮助或指导，将不胜感激。提前谢谢

var数据库={
标签：[“第1天”、“第2天”、“第3天”、“第4天”、“第5天”]，
数据集：[{
标签：“上午时间”，
填充：是的，
背景色：“dedede”，
数据：[09,11,14,17,19]
},
{
标签：“晚间时间”，
填充：是的，
背景颜色：“dddddd”，
数据：[12,13,18,15,20]
},
{
标签：“夜间”，
填充：是的，
背景色：“F8”，
数据：[09,11,14,17,19]
},
]
};
var dataJason={
“meth”：[{
“平均值”：3，
“总和”：33
},
{
“平均值”：34，
“总和”：76
},
{
“平均值”：73，
“总和”：56
},
{
“平均值”：9，
“总和”：43
},
{
“平均值”：11，
“总和”：12
}
]
};
var avgDATA=[]；
var sumDATA=[]；
函数techData（）{
var jdata=dataJason.meth；
var jl=jdata.length；
对于（变量i=0；i

图表
您可以使用
标签
和
页脚
并从每个标签返回一个
字符串
数组
，如下所示：

options: {
  tooltips: {
    callbacks: {       
      label: (tooltipItem, data) => data.datasets.map(ds => ds.label + ": " + ds.data[tooltipItem.index] + "%"),
      footer: tooltipItem => [
          "Avg: " + avgDATA[tooltipItem[0].index],
          "Sum: " + sumDATA[tooltipItem[0].index]              
        ]
    }
  },
  ...

请查看修改后的代码并了解其工作原理：


var数据库={
标签：[“第1天”、“第2天”、“第3天”、“第4天”、“第5天”]，
数据集：[{
标签：“上午时间”，
填充：是的，
背景色：“dedede”，
数据：[9,11,14,17,19]
},
{
标签：“晚间时间”，
填充：是的，
背景颜色：“dddddd”，
数据：[12,13,18,15,20]
},
{
标签：“夜间”，
填充：是的，
背景色：“F8”，
数据：[9,11,14,17,19]
}
]
};
var dataJason={
“meth”：[
{“平均值”：3，“总和”：33}，
{“平均值”：34，“总和”：76}，
{“平均值”：73，“总和”：56}，
{“平均值”：9，“总和”：43}，
{“平均值”：11，“总和”：12}
]
};
var avgDATA=[]；
var sumDATA=[]；
函数techData（）{
var jdata=dataJason.meth；
var jl=jdata.length；
对于（变量i=0；idata.dataset.map（ds=>ds.label+“：“+ds.data[tooltipItem.index]+“%”，
页脚：工具提示项=>[
“Avg:+avgDATA[工具提示项[0]。索引]，
“总和：”+sumDATA[tooltipItem[0]。索引]
]
}
},
比例：{
xAxes：[{
是的
}],
雅克斯：[{
是的
}]
}
}
});
}
init（）
您可以使用
标签
和
页脚
并从每个标签返回一个
字符串
数组
，如下所示：

options: {
  tooltips: {
    callbacks: {       
      label: (tooltipItem, data) => data.datasets.map(ds => ds.label + ": " + ds.data[tooltipItem.index] + "%"),
      footer: tooltipItem => [
          "Avg: " + avgDATA[tooltipItem[0].index],
          "Sum: " + sumDATA[tooltipItem[0].index]              
        ]
    }
  },
  ...

请查看修改后的代码并了解其工作原理：


var数据库={
标签：[“第1天”、“第2天”、“第3天”、“第4天”、“第5天”]，
数据集：[{
标签：“上午时间”，
填充：是的，
背景色：“dedede”，
数据：[9,11,14,17,19]
},
{
标签：“晚间时间”，
填充：是的，
背景颜色：“dddddd”，
数据：[12,13,18,15,20]
},
{
标签：“夜间”，
填充：是的，
背景色：“F8”，
数据：[9,11,14,17,19]
}
]
};
var dataJason={
“meth”：[
{“平均值”：3，“总和”：33}，
{“平均值”：34，“总和”：76}，
{“平均值”：73，“总和”：56}，
{“平均值”：9，“总和”：43}，
{“平均值”：11，“总和”：12}
]
};
var avgDATA=[]；
var sumDATA=[]；
函数techData（）{
var jdata=dataJason.meth；
var jl=jdata.length；
对于（变量i=0；idata.dataset.map（ds=>ds.label+“：“+ds.data[tooltipItem.index]+“%”，
页脚：工具提示项=>[