Javascript 使用Chart.js自定义图表图例

我希望开发以下类型的图表

到目前为止，我取得了以下成果：

但我有以下问题，我不知道如何执行它们

这些天有两个堆栈形式的条形图。这两个图形的图例是相同的，因此我希望它不会在顶部显示重复。这些代表一个百分比

每个条都有一个名称：“turn1”和“turn2”，因此我希望它们能够在我将鼠标悬停在图表上时显示它们的相应值

在“Y轴”的右侧放置另一个文本，但这表示一个由黑线表示的整数

我的源代码如下：

埃杰姆波
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
var barChartData={
标签：[
“迪亚1号”，
“迪亚2号”，
“迪亚3号”，
“迪亚4号”，
“迪亚5号”，
“迪亚6号”，
“迪亚7号”，
“迪亚8号”，
“迪亚9号”，
“迪亚10号”，
],
数据集：[
{
键入：“行”，
标签：“Toneladas暂定”，
边框颜色：#000000“，
背景颜色：“000000”，
边界宽度：2，
填充：假，
数据：[12.8,28.53,50.34,50.87,51.51,53.12,54.59]，
},
{
标签：“%UTILIZACION”，
背景色：“3393df”，
堆栈：“Turno 1”，
数据：[12.8,28.53,50.34,50.87,51.51,53.12,54.59]，
},
{
标签：“%COLAS LARGAS”，
背景颜色：“e88967”，
堆栈：“Turno 1”，
数据：[59,10,12,8,6,17,6]，
},
{
标签：“%COLAS DESCARGA”，
背景色：“9d81bd”，
堆栈：“Turno 1”，
数据：[10,23,13,12,8,7,11]，
},
{
标签：“%高”，
背景色：“B3”，
堆栈：“Turno 1”，
数据：[19,16,10,19,18,16,11]，
},
{
标签：“%待命+副蜥蜴酮”，
背景颜色：“409640”，
堆栈：“Turno 1”，
数据：[0,23,14,11,16,7,18]，
},
{
标签：“%TURNOS 0产品”，
背景颜色：“ffdf00”，
堆栈：“Turno 1”，
数据：[0,0,0,0,0,0,0,0,0]，
},
{
标签：“%UTILIZACION”，
背景色：“3393df”，
堆栈：“Turno 2”，
数据：[12.8,28.53,50.34,50.87,51.51,53.12,54.59]，
},
{
标签：“%COLAS LARGAS”，
背景颜色：“e88967”，
堆栈：“Turno 2”，
数据：[59,10,12,8,6,17,6]，
},
{
标签：“%COLAS DESCARGA”，
背景色：“9d81bd”，
堆栈：“Turno 2”，
数据：[10,23,13,12,8,7,11]，
},
{
标签：“%高”，
背景色：“B3”，
堆栈：“Turno 2”，
数据：[19,16,10,19,18,16,11]，
},
{
标签：“%待命+副蜥蜴酮”，
背景颜色：“409640”，
堆栈：“Turno 2”，
数据：[0,23,14,11,16,7,18]，
},
{
标签：“%TURNOS 0产品”，
背景颜色：“ffdf00”，
堆栈：“Turno 2”，
数据：[0,0,0,0,0,0,0,0,0]，
},
],
};
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
var画布=新图表（ctx{
输入：“酒吧”，
数据：barChartData，
选项：{
标题：{
显示：对，
正文：
“使用Flota和Toneladas交通工具运输1号公路的详细信息：”，
},
图例：{
显示：对，
},
工具提示：{
启用：对，
},
回答：是的，
比例：{
xAxes：[
{
对,，
},
],
雅克斯：[
{
对,，
滴答声：{
分:0,，
max:this.max，//您的绝对最大值
回调：函数（值）{
return（（value/this.max）*100）.toFixed（0）+“%”；//将其转换为百分比
},
},
scaleLabel：{
显示：对，
标签串：“瓷器”，
},
},
],
},
},
});