我正在设置自定义图表颜色,但数字(如图像中突出显示的)不可读。颜色要深一点怎么改?字体颜色如图所示,默认情况下是选择背景颜色的颜色,我不确定使用哪个属性来更改其颜色。
图表颜色:
public chartColors: Array<any> = [
{
//pink
backgroundColor:'rgba(243, 117, 144, 0.5)',
borderColor:[ 'rgb(235, 76, 110)'],
},
{
//Yellow
borderColor:[ "#FF9900"]
},
{
//green
borderColor:[ "#109618"]
},
{
//blue
borderColor:[ "#3366CC"],
},
{
//purpule
borderColor:[ "#990099"]
},
{
//blue
borderColor:[ "#3B3EAC"]
},
{
borderColor:[ "#0099C6"]
},
{
borderColor:[ "#DD4477"]
}
];
HTML:
<canvas mdbChart id="canvas1" [chartType]="chartType" [datasets]="CurrencyAmountchartDatasets"
[labels]="CurrencyAmountchartLabels" width="40" height="30"
[colors]="chartColors" [options]="OverdueAgeingAmountchartOptions" [legend]="true" #myIdentifier>
</canvas>
图表选项:
public OverdueAgeingAmountchartOptions: ChartOptions = {
responsive: true,
tooltips: {
enabled: true
},
hover: {
animationDuration: 0
},
layout: {
padding: {
left: 0,
right: 25,
top: 0,
bottom: 0
}
},
animation: {
duration: 10,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
ctx.fontColor='#000';
});
});
}
},
plugins: {
labels: {
render: 'value',
fontSize: 140,
fontStyle: 'bold',
fontColor: '#000',
fontFamily: '"Lucida Console", Monaco, monospace'
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#333',
usePointStyle:true
}
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
};
1条答案
按热度按时间c7rzv4ha1#
看来您应该使用
fillStyle
而不是fontColor
来自定义每个点上方的标签文本颜色。对于本节:
Demo @ StackBlitz