Javascript Chart.js：显示自定义工具提示，在堆叠条形图上始终可见

在我的MVC项目中，我使用chart.js（v2.8.0）构建了一个包含3个数据集的堆叠条形图

我需要显示自定义工具提示，对于每个数据集，这些提示总是可见的。（见下图）我很难理解如何实现始终可见的自定义工具提示

这就是我当前图表的js代码：

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelArray,
        datasets: [{
            label: 'Green %',
            data: greenData,
            backgroundColor: 'rgb(0,166,149)',
            borderColor: 'rgb(0,166,149)',
            borderWidth: 1,
        },
        {
            label: 'Orange %',
            data: orangeData,
            backgroundColor: 'rgb(229,117,31)',
            borderColor: 'rgb(229,117,31)',
            borderWidth: 1,
        },
        {
            label: 'Grey %',
            data: greyData,
            backgroundColor: 'rgb(179,179,179)',
            borderColor: 'rgb(179,179,179)',
            borderWidth: 1,
        }]
    },
    options: {
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

---

请，如果有人能帮助我在与条形图相关的正确位置获得一些始终可见的自定义工具提示，那么我可以对其进行适当的样式设置。

假设您指的是条形图中的百分比值，这些被称为标签，而不是工具提示（鼠标悬停在某个元素上时会显示）

标签功能在Chart.js中本机不可用，但可以通过添加。您需要通过

脚本

标记包含插件。（在加载Chart.js的脚本标记之后！）

这个结果已经非常接近您想要的结果，但是我已经在下面的代码片段中将它与您的代码合并，以帮助您继续

您可以参考插件来定制最终结果

var labelArray=[“詹姆斯”、“马克”、“西蒙”]，
greenData=[55,82,32]，
orangeData=[27,10,53]，
灰色数据=[18,8,15]；
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：labelArray，
数据集：[{
标签：“绿色%”，
数据：绿色数据，
背景颜色：“rgb（0166149）”，
边框颜色：“rgb（0166149）”，
边框宽度：1
},
{
标签：“橙色%”，
资料来源：orangeData，
背景颜色：“rgb（229117,31）”，
边框颜色：“rgb（229117,31）”，
边框宽度：1，
},
{
标签：“灰色%”，
数据：greyData，
背景颜色：“rgb（179）”，
边框颜色：“rgb（179）”，
边框宽度：1，
}
]
},
选项：{
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
是的
}]
},
插件：{
数据标签：{
颜色：'白色'，
字体：{
重量：“粗体”
},
格式化程序：函数（值、上下文）{
返回Math.round（值）+'%'；
}
}
}
}
});
非常感谢。这正是我所追求的，也是我正在努力的。现在要微调样式！