Javascript 如何为图形中的每个数据点创建自定义工具提示？

我有一个堆叠的条形图，我想显示我们的定性分析师需要完成主题编码过程的项目比例。但是，网页的访问者不一定知道上下文，只需要工具提示中的一些细节。我有两类：（1）总项目和（2）编码项目。在“剩余项目：170”说明下的“总项目”工具提示的新行中，“我想要”说明：尚未进行定性编码的剩余项目。“编码项目：70”同样，我想要新行显示“说明：已进行定性编码的项目数。”

我的堆叠条形图的最后一个工作版本如下：

投资组合审查概述


//图表颜色
变量颜色=['#007bff'、'#28a745'、'#33333'、'#c3e6cb'、'#dc3545'、'#6c757d']；
/*条形图*/
var ctx=document.getElementById（'chBar'）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“编码项目的比例”]，
数据集：[
{
标签：[“编码项目”]，
数据：[70]，
信息：[
[“这是指未使用TDF进行定性编码的项目。”，
背景颜色：“#D6E9C6”，
}],
{
标签：“剩余项目”，
数据：[170]，
背景颜色：颜色。切片（0,1），
信息：[
[“这是指留给代码处理的项目总数。”，
},
]
},
选项：{
工具提示：{
回调：{
标题：（工具提示项，数据）=>data.labels[tooltipItems[0].index]，
label：（工具提示项，数据）=>“计数：”+data.datasets[0]。数据[tooltipItems.index]，
页脚：（工具提示项，数据）=>[''，说明：'].concat（数据.datasets[0].info[tooltipItems[0].index]）
}
}
比例：{
xAxes:[{stacked:true}]，
雅克斯：[{stacked:true}]
}
}
});

您的

工具提示。回调应如下所示：

tooltips: {
  callbacks: {
    title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
    label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
    footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
  }
}

请查看以下修改后的代码：


var colors=['#007bff'、'#28a745'、'#33333'、'#c3e6cb'、'#dc3545'、'#6c757d']；
var ctx=document.getElementById（'chBar'）；
新图表（ctx{
类型：'bar'，
数据：{
标签：[“编码项目的比例”]，
数据集：[{
标签：“编码项目”，
数据：[70]，
背景颜色：“#D6E9C6”，
信息：[
[“这指的是尚未完成的项目]，
[“使用TDF进行了定性编码。”]
]
},
{
标签：“剩余项目”，
数据：[170]，
背景颜色：颜色。切片（0,1），
信息：[
['这是指总数']，
[“留给代码的项目数量”。]
]
}
]
},
选项：{
工具提示：{
回调：{
标题：（工具提示项，数据）=>data.labels[tooltipItems[0].index]，
label：（tooltipItems，data）=>data.datasets[tooltipItems.datasetIndex]。label+''+data.datasets[tooltipItems.datasetIndex]。data[tooltipItems.index]，
页脚：（tooltipItems，data）=>[''，Description:'].concat（data.dataset[tooltipItems[0].datasetIndex].info）
}
},
比例：{
xAxes：[{
是的
}],
雅克斯：[{
是的
}]
}
}
})；
画布{
最大宽度：400px；
}
Ahh，现在我明白我错在哪里了。非常感谢！