Angular Google 图表 - angular-google-图表 - 折线图 - hAxis 网格线颜色不起作用
Angular Google Chart - angular-google-charts - Line Chart - hAxis gridlines color not working
我正在使用 angular-google-图表,但我不知道为什么我无法更改 hAxis 网格线的颜色。
这是我的组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
public chart1: any;
constructor() { }
ngOnInit(): void {
this.chart1 = {
title: 'Test',
type: 'LineChart',
data: [
[0, 15],
[1, 27],
[2, 11],
[3, 14]
],
columnNames: ["Giorno", "Valori"],
options: {
hAxis: {
title: 'Giorno',
gridlines: { color: '#FF000' },
gridlineColor: '#FF000',
baselineColor: '#FF0000',
},
vAxis:{
title: 'Valori'
},
},
};
}
}
这是我的观点:
<google-chart style="width: 1000px;height: 500px;"
[title]="chart1.title"
[type]="chart1.type"
[data]="chart1.data"
[columns]="chart1.columnNames"
[options]="chart1.options">
</google-chart>
这是输出:
"hAxis.gridlines.color" 和 "hAxis.gridlineColor" 属性不会改变垂直网格的颜色...
我做错了什么?
您提供的十六进制格式颜色错误,因为它应该采用 #rrggbb
的形式(您只提供了 5 个值而不是 6 个值)。相应地更改它:
gridlines: { color: '#FF000' },
gridlineColor: '#FF000',
至
hAxis: {
title: 'Giorno',
gridlines: { color: '#FF000' }
}
参考
我正在使用 angular-google-图表,但我不知道为什么我无法更改 hAxis 网格线的颜色。
这是我的组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
public chart1: any;
constructor() { }
ngOnInit(): void {
this.chart1 = {
title: 'Test',
type: 'LineChart',
data: [
[0, 15],
[1, 27],
[2, 11],
[3, 14]
],
columnNames: ["Giorno", "Valori"],
options: {
hAxis: {
title: 'Giorno',
gridlines: { color: '#FF000' },
gridlineColor: '#FF000',
baselineColor: '#FF0000',
},
vAxis:{
title: 'Valori'
},
},
};
}
}
这是我的观点:
<google-chart style="width: 1000px;height: 500px;"
[title]="chart1.title"
[type]="chart1.type"
[data]="chart1.data"
[columns]="chart1.columnNames"
[options]="chart1.options">
</google-chart>
这是输出:
"hAxis.gridlines.color" 和 "hAxis.gridlineColor" 属性不会改变垂直网格的颜色...
我做错了什么?
您提供的十六进制格式颜色错误,因为它应该采用 #rrggbb
的形式(您只提供了 5 个值而不是 6 个值)。相应地更改它:
gridlines: { color: '#FF000' },
gridlineColor: '#FF000',
至
hAxis: {
title: 'Giorno',
gridlines: { color: '#FF000' }
}