我正在使用Angular 16和ng 2-charts来显示一个基本的折线图。我想从图表中删除网格线。我找不到这样做的选项。有人可以帮助我吗?
<div class="chart-wrapper" style="padding-left: 30px;">
<canvas baseChart width="230" height="130" [datasets]="lineChartData" [labels]="lineChartLabels"
[options]="lineChartOptions" [legend]="lineChartLegend" [type]="lineChartType">
</canvas>
</div>
lineChartData: any[] = [
{
data: [71, 72, 73, 72, 74, 75 ,85, 72, 78, 75, 77, 75],
borderWidth: 1,
backgroundColor: 'gray',
borderColor: 'black',
pointBackgroundColor: 'black',
pointBorderColor: 'black',
pointHoverBackgroundColor: 'gray',
pointHoverBorderColor: 'gray',
tension:0
},
];
lineChartLabels: any[] = ['a', 'b', 'c', 'd', 'e', 'f','g', 'h', 'i', 'j', 'k', 'l'];
lineChartOptions: ChartOptions = {
responsive: true,
elements: {
point: {
radius: 0,
},
line: {
borderWidth: 1
}
}
};
lineChartLegend = false;
lineChartPlugins = [];
lineChartType: ChartType = 'line';
2条答案
按热度按时间pkln4tw61#
你可以像这样将这个选项设置为false:
7hiiyaii2#
要删除网格线,可以调整lineChartOptions,以指定不应同时显示x轴和y轴的网格线。
更新您的lineChartOptions如下: