Chart.js自定义工具提示

尝试了解如何为每个栏的工具提示存储自定义信息文本。（见下图）

百分比来自标价栏和销售价格栏的计算，文本将根据正百分比和负百分比进行更改

这是代码。 工具提示文本当前已硬编码

Chart.defaults.global.defaultFontSize=10；
var listPriceData={
标签：“平均标价”，
数据：[100200300400500600]，
背景颜色：“#ff937f”，
边框宽度：0，
yAxisID：“y轴-0”
};
var salePriceData={
标签：“平均售价”，
数据：[150250350450550650]，
背景颜色：“#fed6ce”，
边框宽度：0，
yAxisID：“y轴-0”
};
var allData={
标签：[“2019年8月”、“2019年9月”、“2019年10月”、“2019年11月”、“2019年12月”、“2020年1月”]，
数据集：[listPriceData，salePriceData]
};
var图表选项={
图例：{
显示：假
},
悬停：{
动画持续时间：0
},
动画：{
持续时间：1，
未完成：功能（el）{
var chartInstance=this.chart，
ctx=chartInstance.ctx；
ctx.font=Chart.helpers.fontString(
Chart.defaults.global.defaultFontSize=12，
Chart.defaults.global.defaultFontStyle=“bold”，
Chart.defaults.global.defaultFontFamily
);
ctx.fillStyle=el.chart.config.options.defaultFontColor；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（dataset，i）{
var meta=chartInstance.controller.getDatasetMeta（i）；
meta.data.forEach（函数（条、索引）{
var数据=数据集。数据[索引]；
填充文本（数据，条._model.x，条._model.y-5）；
});
});
}
},
工具提示：{
启用：false，
自定义：函数（ToolTimpodel）{
//工具提示元素
var tooltipEl=document.getElementById（'home-experiment-tooltip'）；
//在第一次渲染时创建元素
如果（！工具管）{
tooltipEl=document.createElement（'div'）；
tooltipEl.id='主页欣赏工具提示'；
tooltipEl.innerHTML=''；
document.body.appendChild（工具管道）；
}
//如果没有工具提示，则隐藏
如果（ToolTimpodel.opacity==0）{
tooltipEl.style.opacity=0；
返回；
}
//设置插入符号位置
移除（'Upper'、'Down'、'no transform'）；
如果（ToolTimpodel.yAlign）{
添加（tooltipModel.yAlign）；
}否则{
tooltipEl.classList.add（'no-transform'）；
}
函数getBody（bodyItem）{
返回bodyItem.line；
}
//设置文本
如果（ToolTimpodel.body）{
var titleLines=tooltipModel.title | |[]；
var bodyLines=tooltipModel.body.map（getBody）；
var innerHtml=''；
标题行。forEach（函数（标题）{
innerHtml+=''+''+0.2%''+''；
});
innerHtml+=''；
bodyLines.forEach（函数（body，i）{
var colors=tooltipModel.labelColors[i]；
//innerHtml+=''+正文+''；
innerHtml+=''+“房屋售价为标价的110%”+''；
});
innerHtml+=''；
var tableRoot=tooltipEl.querySelector（'table'）；
tableRoot.innerHTML=innerHTML；
}
//'这'将是整个工具提示
var position=this.\u chart.canvas.getBoundingClientRect（）；
//显示、定位和设置字体样式
tooltipEl.style.opacity=1；
tooltipEl.style.position='absolute'；
tooltipEl.style.left=position.left+window.pageXOffset+tooltipModel.caretX-65+'px'；
tooltipEl.style.top=position.top+window.pageYOffset+tooltipModel.caretY-85+'px'；
tooltipEl.style.pointerEvents='none'；
}
},
比例：{
xAxes：[{
百分比：1，
类别类别：0.6，
滴答声：{
fontColor:“#8292A2”，
尺寸：10，
},
网格线：{
显示：假，
颜色：“rgb（226230233）”，
偏移网格线：真
}
}],
雅克斯：[
{
显示：假，
},
{
类型：“线性”，
id:“y轴-0”，
显示：对，
滴答声：{
fontColor:#202C4A“，
尺寸：10，
字体：“粗体”，
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
返回“$”+值+k”；
}
},
网格线：{
显示：对，
borderDash:[4,2]，
颜色：“rgb（226230233）”
}
}]
}
};
Chart.defaults.global.defaultFontColor='#263151'；
var myCanvas=document.getElementById（“homePremissionChartCanvas”）.getContext（“2d”）；
var条形图=新图表（myCanvas{
类型：'bar'，
数据：所有数据，
选项：图表选项
});
画布{
边缘顶部：100px；
最大宽度：700px；
}
#家庭欣赏工具提示{
背景色：#1d2c49；
边界半径：3px；
最大宽度：130像素；
宽度：130px；
填充物：5px；
}
#家庭欣赏提示：之前{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：50%；
转化：translateX（-50%）；
最高：100%；
左边框：5px实心透明；
右边框：5px实心透明；
边框顶部：5px实心#1d2c49；
}
#家庭欣赏工具提示表{
边界塌陷：塌陷；
}
#家庭欣赏工具提示h5{
颜色：#ffffff；
字体大小：16px；
字体大小：粗体；
保证金：0；
填充：0 3px 0；
线高：1米；
}
#家庭增值提示，
#家庭欣赏工具提示td{
颜色：#ed6c54；
字体大小：10px；
字体大小：粗体；
填充：0；
保证金：0；
行他