ChartJS 如何删除网格线和轴角ng2图表?

mwngjboj  于 2023-10-18  发布在  Chart.js
关注(0)|答案(2)|浏览(146)

我正在使用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';
pkln4tw6

pkln4tw61#

你可以像这样将这个选项设置为false:

lineChartOptions: ChartOptions  = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
      },
    },
  };
7hiiyaii

7hiiyaii2#

要删除网格线,可以调整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
      }
    }
};

相关问题