如何删除角度 ng2 图表中的网格线和轴？

Question

我正在使用 Angular 16 和 ng2-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';

Answer 1

要删除网格线，您可以调整 lineChartOptions 以指定 x 轴和 y 轴不应显示网格线。

按如下方式更新您的 lineChartOptions：

    lineChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      x: { // for x-axis
        grid: {
          display: false
        }
      },
      y: { // for y-axis
        grid: {
          display: false
        }
      }
    },
    elements: {
      point: {
        radius: 0,
      },
      line: {
        borderWidth: 1
      }
    }
};