chartjs中的字体颜色为浅灰色，因此当您要从页面打印时，它不会出现。
我在options属性中更改了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>
我在ts文件中使用如下所示的chartjs。
这是我完整的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'
}
}
};
}
}
答案 0 :(得分：1)
要更改坐标平面中数字和线条的颜色，我们可以执行以下操作： 例如在xAxes中：
<html>
<head>
<style type="text/css">
.content {
transform: scale(.56);
margin-left:-30px;
position:absolute;
}
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 0;
page-break-inside:auto;
}
table tr:nth-child(2n-1) td {
background-color: #ffffff;
border:1px solid black;
page-break-inside:auto;
}
table th {
padding: 0px;
white-space: normal;
font-weight: normal;
border:1px solid black;
page-break-inside:auto;
}
table td {
padding: 0px;
white-space: normal;
text-align: center;
border:1px solid black;
page-break-inside:auto;
}
@media print {
body {
margin-top: 100cm;
page-break-after: always;
display: inline;
}
</style>
</head>
<body>
<div class="content">
<table>
<thead>
<tr>
<th rowspan="2" style="width: 20px">#</th>
<th colspan="8" style="text-align: center;width: 500px">Tanggal - Jam</th>
<th rowspan="2" style="text-align: center;width: 50px">No PO</th>
<th rowspan="2" style="text-align: center;width: 50px">No DO</th>
<th rowspan="2" style="text-align: center;width: 150px">No BM</th>
<th rowspan="2" style="text-align: center;width: 150px">No SJ</th>
<th rowspan="2" style="text-align: center;width: 50px">No Unit</th>
<th rowspan="2" style="text-align: center;width: 50px">No Polisi</th>
<th rowspan="2" style="text-align: center;width: 80px">Nama Konsumen</th>
<th rowspan="2" style="text-align: center;width: 80px">Jenis Kendaraan</th>
<th rowspan="2" style="text-align: center;width: 80px">Nama Supir</th>
<th rowspan="2" style="text-align: center;width: 80px">Jenis Transaksi</th>
<th rowspan="2" style="text-align: center;width: 80px">Nama Material</th>
<th colspan="2" style="text-align: center;width: 80px">Jumlah</th>
<th rowspan="2" style="text-align: center;width: 60px">Material (Rp.)</th>
<th rowspan="2" style="text-align: center;width: 60px">CSR (Rp.)</th>
<th rowspan="2" style="text-align: center;width: 60px">ATP (Rp.)</th>
<th rowspan="2" style="text-align: center;width: 60px">Total (Rp.)</th>
<th rowspan="2" style="text-align: center;width: 50px">Proyek</th>
<th rowspan="2" style="text-align: center;width: 100px">Tujuan</th>
</tr>
<tr>
<th colspan="2" style="text-align: center"> Masuk</th>
<th colspan="2" style="text-align: center"> Produksi</th>
<th colspan="2" style="text-align: center"> Timbang</th>
<th colspan="2" style="text-align: center"> Keluar</th>
<th style="text-align: center"> K </th>
<th style="text-align: center"> T </th>
</tr>
</thead>
<tbody>
<?php
$no = 0;
foreach ($list_data as $data) {
$no++;
$tonasesatuan = $data['netto'] / 1000;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo date_dmy($data['tanggal']); ?></td>
<td><?php echo date_time($data['tanggal']); ?></td>
<td><?php echo date_dmy($data['tanggal_produksi']); ?></td>
<td><?php echo date_time($data['tanggal_produksi']); ?></td>
<td><?php echo date_dmy($data['tanggal_out']); ?></td>
<td><?php echo date_time($data['tanggal_out']); ?></td>
<td><?php echo date_dmy($data['tanggal_timbang']); ?></td>
<td><?php echo date_time($data['tanggal_timbang']); ?></td>
<td><?php echo $data['no_po']; ?></td>
<td><?php echo $data['no_do']; ?></td>
<td><?php echo $data['no_bm']; ?></td>
<td><?php echo $data['no_sj']; ?></td>
<td><?php echo getLabelIndex($data['nopol'], 'no_unit'); ?></td>
<td><?php echo $data['nopol']; ?></td>
<td style="text-align: center"><?php echo $data['nama_konsumen']; ?></td>
<td><?php echo $jeniskendaraan = strtoupper($data['jenis_kendaraan']); ?></td>
<td><?php echo $data['supir']; ?></td>
<td><?php echo $data['jenis_transaksi']; ?></td>
<td><?php echo $data['nama_material']; ?></td>
<td><?php echo $kubikasi = number_format($data['hasil'], 2, '.', ','); ?> m<sup>3</sup></td>
<td><?php echo $netto = number_format($tonasesatuan, 2, '.', ','); ?> Ton</td>
<td style="text-align: right"><?php echo number_format($data['total_material']); ?></td>
<td style="text-align: right"><?php echo number_format($data['csr']); ?></td>
<td style="text-align: right"><?php echo number_format($data['atp']); ?></td>
<td style="text-align: right"><?php echo number_format($data['total_bayar']); ?></td>
<td><?php echo getLabelNamaProyek($data['proyek'], 'nama_proyek'); ?></td>
<td><?php echo $data['tujuan']; ?></td>
</tr>
<?php
$tronton += $jeniskendaraan == 'TRONTON';
$colt += $jeniskendaraan == 'COLT DIESEL';
$engkel += $jeniskendaraan == 'ENGKEL';
$pick += $jeniskendaraan == 'PICK UP';
$totkubikasi += $kubikasi;
$totnetto += $tonasesatuan;
$no;
$kubik = $totkubikasi / $no;
$ton = $totnetto / $no;
}
?>
</tbody>
<tfoot>
</tfoot>
</table>
<br>
<br>
<table>
<tfoot>
<tr>
<td style="text-align: center; color: red;"> #</td>
<td colspan="8" style="text-align: center; color: red;"> TOTAL ARMADA</td>
<td colspan="4" style="text-align: center; color: red;"><?php echo round($tronton, 2); ?> TRONTON</td>
<td colspan="4" style="text-align: center; color: red;"><?php echo round($colt, 2); ?> COLT DIESEL</td>
<td colspan="4" style="text-align: center; color: red;"><?php echo round($engkel, 2); ?> ENGKEL</td>
<td colspan="4" style="text-align: center; color: red;"><?php echo round($pick, 2); ?> PICK UP</td>
</tr>
<tr>
<td style="text-align: center; color: red;"> #</td>
<td colspan="8" style="text-align: center; color: red;"> TOTAL KUBIKASI</td>
<td colspan="4" style="text-align: center; color: red;"><?php echo number_format($totkubikasi, 2, '.', ','); ?> m<sup>3</sup></td>
<td colspan="4" style="text-align: center; color: red;"> TOTAL TONASE</td>
<td colspan="8" style="text-align: center; color: red;"><?php echo number_format($totnetto, 2, '.', ','); ?> Ton</td>
</tr>
<tr>
<td style="text-align: center; color: red;"> #</td>
<td colspan="8" style="text-align: center; color: red;">RATA - RATA KUBIKASI</td>
<td colspan="4" style="text-align: center; color: red;"><?php echo number_format($kubik, 2, '.', ','); ?> m<sup>3</sup></td>
<td colspan="4" style="text-align: center; color: red;">RATA - RATA TONASE</td>
<td colspan="8" style="text-align: center; color: red;"><?php echo number_format($ton, 2, '.', ','); ?> Ton</td>
</tr>
</tfoot>
</table>
</div>
</body>
</div>
</head>
</html>
以及标签的字体和颜色：
xAxes: [{
gridLines: {
display: true,
color: "red" // this here
},
ticks: {
fontColor: "red", // this here
}
}],
DEMO。
答案 1 :(得分：1)
您可以尝试编辑源代码。 1.转到节点模块文件夹中的链接 /node_modules/chart.js/src/core/core.js 。 2.编辑以下代码，即core.js文件。更改
defaultFontColor：'＃0000ff'
为您想要的任何颜色。我已经在我的饼图代码中实现了这一点。而且有效。
`
graudep.loc[graudep.title.apply(lambda elt: "Grado en" in elt)]