如何在自定义 TFS 小组件中更改饼图颜色

Question

我必须在自定义tfs widget中更改默认条形图颜色，我该怎么做？ 我知道有一个"color"选项，但我找不到正确的语法。 谢谢。

这是我的图表代码：

chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};

Answer 1

尝试添加自定义颜色，如下所示：

chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"colorCustomizationOptions": {
"customColors": ["#FF0000", "#00CC00", "#302772"]
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};

Answer 2

在vss-web-extension-sdk/typings/charts.d.ts中，我发现customColors是一个ColorEntry数组。ColorEntry 有两个字符串属性：value、backgroundColor。经过一些试验和错误，我发现值应该是您要为其设置颜色的标签。

所以我认为这应该有效：

chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"colorCustomizationOptions": {
"customColors": [
{backgroundColor: "#FF0000", value: "Bugs"},
{backgroundColor: "#00CC00", value: "Vulnerabilities"},
{backgroundColor: "#302772", value: "Code smells"}
]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};