Изменить размер шрифта и цвет шрифта в Chartjs Angular 5

Question

Цвет шрифта в chartjs светло-серый, тогда, когда вы хотите напечатать со страницы, он не появляется.

Я изменяю цвет шрифта chartjs в атрибуте параметров, но он не работает.

Как я могу изменить цвет шрифта в chartjs angular

public options:any = {

    legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'red',
                fontSize: '30'
            }
        }
  };

в шаблоне:

<canvas baseChart
                height=100                
                [datasets]="barChartData"
                [labels]="barChartLabels"
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [colors]="chartColors"
                [chartType]="barChartType"
                [options]="options"
                >
        </canvas>

Я использую chartjs, как показано ниже в файле ts.

Это мой полный файл TS:

import { Component, Input, OnInit } from '@angular/core';

import { Test } from './models/test.model';

@Component({
  selector: 'app-customer-report-test',
  templateUrl: './customer-report-test.component.html',
  styleUrls: ['./customer-report-test.component.css']
})
export class CustomerReportTestComponent implements OnInit {

  @Input('test') test: Test = new Test();

  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[];
  backgroundColorList: string[];
  public chartColors: any[] = [
      {
        backgroundColor: this.backgroundColorList
      }];


  public options:any;

  constructor() { }
  //----------------------------------------------------------------------------
  ngOnInit() {

    //set Label
    this.barChartLabels = [];
    for(let i=1; i<= this.test.data_array.length; i++){
      this.barChartLabels.push('' + i);
    }
    //set data chart
    this.barChartData = [{data: this.test.data_array, label: this.test.test_type[1]}]
    this.test.test_type[1]}, {data: [20,20, 20, 20],type: "line",label: ['0', '1', '2', '3'] ,fill:'none'}]

    // set color to line according to state_array
    this.backgroundColorList = [];
    if(this.test.state_array.length != 0){

      for(let i=0; i<this.test.data_array.length; i++){
        if(this.test.state_array[i] == 0){
          this.backgroundColorList.push('#069ed6');
        }else if(this.test.state_array[i] == 1){
          this.backgroundColorList.push('#F5482D');
        }else if(this.test.state_array[i] == 2){
          this.backgroundColorList.push('#CAC409');
        }
      }
   }
    else{
      for(let d of this.test.data_array){
        this.backgroundColorList.push('#069ed6');
      }
    }

    this.chartColors = [
        {
          backgroundColor: this.backgroundColorList
        }];

    this.options = {
      responsive: true,
      title: {
              display: true,
              text: 'Custom Chart Title'
          },

          legend: {
                  display: true,
                  labels: {
                      fontColor: 'red'
                  }
              }

    };
  }
}

Answer 1

Вы можете попробовать отредактировать исходный код.1. Перейдите по ссылке / node_modules / chart.js / src / core / core.js в папке модулей вашего узла.2. отредактируйте следующий код, т.е. файл core.js.замените

defaultFontColor: '# 0000ff'

на любой нужный вам цвет.Я реализовал это в своем коде для круговой диаграммы.и это сработало.

`

defaults._set('global', {

responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: true,
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
hover: {
    onHover: null,
    mode: 'nearest',
    intersect: true,
    animationDuration: 400
},
onClick: null,
defaultColor: 'rgba(0,0,0,0.1)',
defaultFontColor: '#0000ff',
defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
defaultFontSize: 12,
defaultFontStyle: 'normal',
showLines: true,

// Element defaults defined in element extensions
elements: {},

// Layout options such as padding
layout: {
    padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    }
}
});

module.exports = function() {

// Occupy the global variable of Chart, and create a simple base class
var Chart = function(item, config) {
    this.construct(item, config);
    return this;
};

Chart.Chart = Chart;

return Chart;
};`

Answer 2

для изменения цвета чисел и линий в координатной плоскости мы можем сделать: например, в xAxes:

xAxes: [{
    gridLines: {
        display: true,
        color: "red" // this here     
    },
    ticks: {
        fontColor: "red", // this here     
    }
}],

и шрифт и цвет меток:

legend: {
    display: true,
    labels:{
        fontSize: 10,
        fontColor: 'red',
    }
},

DEMO .