Angular 使用 PrimeNG charjs 字体颜色问题

Question

我有这张图表，我想更改标签的颜色

https://i.stack.imgur.com/vsw6x.png

灰色的标签我想把它变成白色，因为它无法读取

我的代码

HTML5:

<div class="box-result">
    <h5 class="title-result">Line Styles</h5>
    <p-chart type="line" [data]="lineStylesData" [options]="lineOptions"></p-chart>
</div>

TS:

lineStylesData: any;
lineOptions: any;

constructor() {}

  ngOnInit(): void {
    this.lineStylesData = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      color: 'red',
      datasets: [
        {
          label: 'First Dataset',
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          tension: 0.4,
          borderColor: '#42A5F5',
        },
        {
          label: 'Second Dataset',
          data: [28, 48, 40, 19, 86, 27, 90],
          fill: false,
          borderDash: [5, 5],
          tension: 0.4,
          borderColor: '#66BB6A',
        },
        {
          label: 'Third Dataset',
          data: [12, 51, 62, 33, 21, 62, 45],
          fill: true,
          borderColor: '#FFA726',
          tension: 0.4,
          backgroundColor: 'rgba(255,167,38,0.2)',
        },
      ],
    };

    this.lineOptions = {
      legend: {
        fontColor: '#fff',
      },
      scales: {
        xAxes: [
          {
            ticks: {
              fontColor: 'white',
            },
          },
        ],
        yAxes: [
          {
            ticks: {
              fontColor: 'white',
              beginAtZero: true,
            },
          },
        ],
      },
    };

  }

X 和 Y 轴标签的字体颜色可以解决这个问题。在此先感谢我尝试了各种堆栈溢出代码但没有积极的结果

Answer 1

您在使用 V3 的同时使用了 V2 语法，这两个版本之间存在一些重大的重大变化，对于所有变化，请阅读 migration guide 以了解所有变化。

要解决您的问题，您的选项需要如下所示：

options: {
  scales: {
    x: {
      ticks: {
        color: 'white'
      }
    },
    y: {
      ticks: {
        color: 'white'
      }
    }
  },
  plugins: {
    legend: {
      labels: {
        color: 'white'
      }
    }
  }
}

Angular 使用 PrimeNG charjs 字体颜色问题

Angular using PrimeNG charjs problem with font colors

angular

typescript

chart.js

primeng