Chart.js自定义图表颜色后数值字体颜色调整问题

已为Chart.js设置自定义图表颜色，但图表上的数值可读性差，需要将其颜色调深。目前数值字体颜色默认继承背景色，不清楚应使用哪个属性修改。

图表颜色代码 #

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. 修正手动绘制数值的颜色 #

你在animation.onComplete中手动绘制数值的代码里，错误使用了ctx.fontColor——Canvas API中设置文本填充颜色需要用ctx.fillStyle，且必须在fillText调用前设置。修改后的代码片段如下：

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';
    // 设置文本为深颜色，这里用纯黑#000，可根据背景调整为#111/#222等
    ctx.fillStyle = '#000';
    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);
      });
    });
  }
},

2. 调整labels插件的数值颜色 #

如果你的数值是通过chartjs-plugin-labels插件渲染的，你已经在plugins.labels中设置了fontColor: '#000'，若未生效，检查插件是否正确引入。也可以将fontColor改为对比更强的深色调（比如#111），提升可读性。

内容的提问来源于stack exchange，提问作者Shreya Singh