代码之家 › 专栏 › 技术社区 › Ali

更改chart5中的字体大小和字体颜色

chart.js typescript angular css

Ali · 技术社区 · 6 年前

chartjs中的字体颜色为浅灰色,当您要从页面打印时,它不会出现。

我在options属性中更改了chartjs的字体颜色,但它不起作用。

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>

这是我的完整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'
                  }
              }

    };
  }
}

2 回复 | 直到 6 年前

Lia 6 年前

要更改坐标平面中数字和线的颜色,可以执行以下操作: 例如,在XAX中:

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

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

DEMO .

Abhiz 6 年前

1转到链接 /节点\模块/chart.js/src/core/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;
};`