Chart.JS图例自定义颜色更改

qkf9rpyu  于 2023-05-22  发布在  Chart.js
关注(0)|答案(1)|浏览(242)

我正在设置自定义图表颜色,但数字(如图像中突出显示的)不可读。颜色要深一点怎么改?字体颜色如图所示,默认情况下是选择背景颜色的颜色,我不确定使用哪个属性来更改其颜色。


图表颜色:

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
        }
      }]
    }
  };
c7rzv4ha

c7rzv4ha1#

看来您应该使用fillStyle而不是fontColor来自定义每个点上方的标签文本颜色。

ctx.fillStyle = '#000';

对于本节:

meta.data.forEach(function (bar, index) {
  var data = dataset.data[index];
            
  ctx.fillText(data, bar._model.x, bar._model.y - 5);
  ctx.fillStyle = '#000';
});

Demo @ StackBlitz

相关问题