Javascript 将亡命之徒装到画布上，并使用不同的颜色

我正在使用EXLABELS创建一个饼图，以显示图表外部的标签，但当我有多个小切片时，标签在画布外部呈现，我尝试更改zoomOutPercentage并添加更多填充，但图表最终变得非常小

另外，我需要用饼片的颜色显示每个标签的第一行，另外两行应该是黑色的，但我没有任何运气

这是我的一张图片，下面是我用于显示标签的插件代码：

plugins = {
      outlabels: {
        backgroundColor: null,
        text: ['value 1 \n text1: ' + formatNumber(values[0]) + '\n' + 'text 2: ' + price[0] ,
               'value 2 \n text1: ' + formatNumber(values[1]) + '\n' + 'text 2: ' + price[1] ,
               'value 3 \n text1: ' + formatNumber(values[2]) + '\n' + 'text 2: ' + price[2] ,
               'value 4 \n text1: ' + formatNumber(values[3]) + '\n' + 'text 2: ' + price[3]],
        color: 'black',
        stretch: 30,
        font: {
          resizable: true,
          minSize: 10,
          maxSize: 30,
        },
        zoomOutPercentage: 100,
        textAlign: 'start', 
        backgroundColor: null
      }
    }

---

可以向布局选项添加填充，并将“输出标签颜色”值设置为数组

const COLORS=[
“#2ecc71”，
“#3498db”，
“#95a5a6”，
“#9b59b6”，
“#f1c40f”，
“#e74c3c”，
“#34495e”
];
新图表（document.querySelector（'.Chart'）.getContext（'2d'）{
键入“pie”，
数据：{
标签：[“绿色”、“蓝色”、“灰色”、“紫色”、“黄色”、“红色”、“黑色”]，
数据集：[{
背景颜色：颜色，
数据：[12,19,3,17,28,24,7]
}]
},
选项：{
布局：{
填充：50
},
图例：{
显示：假
},
插件：{
不法之徒：{
背景颜色：空，
颜色：颜色，
伸展：30，
字体：{
可调整大小：正确，
minSize:15，
最大尺寸：20，
},
动物百分比：100，
textAlign:'开始'，
背景颜色：空
}
}
}
});
body{背景：#111；}
.doughnut画布容器{背景：#FFF；}