在bar chart.js上显示图像和标签(chartjs插件数据标签)

在bar chart.js上显示图像和标签(chartjs插件数据标签),chart.js,chart.js2,ng2-charts,Chart.js,Chart.js2,Ng2 Charts,chartjs插件datalabels支持显示与图形内容的值、数据和上下文相关的信息。需要根据值在每个图形上显示图像和文本标签。请参阅附加的快照 尝试了toopltip的自定义选项,但基本上需要尝试在插件数据标签中呈现html,以便也可以添加图像 插件:{ 数据标签:{ 主持人:"结束",, 对齐:“开始”, 字体:{ 尺码:20, } } } 在工具栏上显示图像 预期结果:这可以通过以下方法实现: 新图表(document.getElementById('myChart'){ 类型:'bar

chartjs插件datalabels支持显示与图形内容的值、数据和上下文相关的信息。需要根据值在每个图形上显示图像和文本标签。请参阅附加的快照

尝试了toopltip的自定义选项,但基本上需要尝试在插件数据标签中呈现html,以便也可以添加图像

插件:{ 数据标签:{ 主持人:"结束",, 对齐:“开始”, 字体:{ 尺码:20, } } }

在工具栏上显示图像


预期结果:

这可以通过以下方法实现:

新图表(document.getElementById('myChart'){
类型:'bar',
数据:{
标签:['2009','2010','2011','2012'],
数据集:[{
标签:“我的第一个数据集”,
数据:[25,59,80,76],
填充:假,
背景颜色:['rgba(255,99,132,0.2','rgba(255,159,64,0.2','rgba(255,205,86,0.2','rgba(75,192,192,0.2'),
边框颜色:['rgb(255,99132)''rgb(255,159,64)''rgb(255,205,86)''rgb(75192192)''rgb(54162235)',
边框宽度:1
}]
},
选项:{
插件:{
数据标签:{
主持人:"结束",,
对齐:“开始”
},
标签:{
渲染:“图像”,
文本边距:-60,
图像:[
无效的
无效的
{
src:'https://i.stack.imgur.com/9EMtU.png',
宽度:20,
身高:20
},
无效的
]
}
},
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的
}
}]
}
}
});
画布{
最大宽度:300px;
}

您可以使用chartjs控制器添加图像和标签,而无需使用插件。