图表.js更改标签颜色
Chart.js change label color
我正在使用图表.js库制作极坐标图,但无法更改标签的颜色,请帮助我如何更改标签的颜色。我的图表看起来像 http://headsocial.com:8080/upload/145448587471822e0922d67c9dd6aae46d70bfeef1623.png,但我想将颜色更改为灰色,目前它显示为橙色
function show_polar_chart_data1(data, id){
var jsonData = jQuery.parseJSON(data);
var data = [
{
value: jsonData.IDENTITY_Avg,
color: "#8258FA",
highlight: "#8258FA",
label: "IDENTITY("+jsonData.IDENTITY+")"
},
{
value: jsonData.ROLE_Avg,
color: "#34ED13",
highlight: "#34ED13",
label: "ROLE("+jsonData.ROLE+")"
},
{
value: jsonData.ATTITUDE_Avg,
color: "#FFFF00",
highlight: "#FFFF00",
label: "ATTITUDE("+jsonData.ATTITUDE+")"
},
{
value: jsonData.AGILITY_Avg,
color: "#FF0000",
highlight: "#FF0000",
label: "AGILITY("+jsonData.AGILITY+")"
},
{
value: jsonData.FAIRNESS_Avg,
color: "#00FFFF",
highlight: "#00FFFF",
label: "FAIRNESS("+jsonData.FAIRNESS+")"
},
{
value: jsonData.CONFLICT_Avg,
color: "#EE9A4D",
highlight: "#EE9A4D",
label: "CONFLICT("+jsonData.CONFLICT+")"
}
];
var ctx = document.getElementById("chart").getContext("2d");
var polarChart = new Chart(ctx).PolarArea(data, {
scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 1,
scaleShowLabels: false,
scaleSteps: 10,
onAnimationComplete: function () {
this.segments.forEach(function (segment) {
var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
x: this.chart.width / 2,
y: this.chart.height / 2,
startAngle: segment.startAngle,
endAngle: segment.endAngle,
outerRadius: segment.outerRadius * 2 + 10,
innerRadius: 0
})
var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
while (normalizedAngle > 2 * Math.PI) {
normalizedAngle -= (2 * Math.PI)
}
if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
ctx.textAlign = "start";
else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
outerEdge.y += 5;
ctx.textAlign = "center";
}
else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
outerEdge.y - 5;
ctx.textAlign = "center";
}
else
ctx.textAlign = "end";
ctx.fillText(segment.label, outerEdge.x, outerEdge.y);
})
done();
}
});
});
}
}
只需添加
ctx.fillStyle = 'black';
在您ctx.fillText...
之前
您是否尝试过添加:
scaleFontColor: "<the color you want to add>"
到图表初始化,如下所示:
var polarChart = new Chart(ctx).PolarArea(data, {
scaleFontColor: "<the color you want to add>"
...
检查此SO答案:使用图表更改折线图的标签字体颜色.js
相关文章:
- Chart.js条形图:网格颜色和隐藏标签
- d3.js轴标签-颜色不变
- 将鼠标悬停在切片上时更改d3.js饼图标签的颜色
- 更改聚焦时的标签背景颜色复选框
- 如何使用角度图更改标签的颜色
- JQPLOT 根据标签名称为饼图设置自定义颜色
- 更改经纬网标签的颜色
- 使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段已经在css中带有!important标签的边
- 标记标签始终打印黑色文本,而不是指定的颜色
- 根据高图表中的列值更改数据标签颜色、旋转和对齐值
- 图表.js更改标签颜色
- 如何使用 jquery 更改标签上的永久颜色
- 更改活动输入框上的标签颜色
- 如何在高图表中更改标签颜色
- Flot:通过多个堆叠条形图在整个屏幕上保持一致的标签颜色
- 更改c3js(c3.js)中的标签颜色
- 使用javascript更改标签颜色时出现问题
- 将甜甜圈图的系列标签颜色改为系列颜色
- Javascript Jquery-更改标签颜色
- 设置拉斐尔图上的标签颜色