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

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

我正在使用Angular 16和ng 2-charts来显示一个基本的折线图。我想从图表中删除网格线。我找不到这样做的选项。有人可以帮助我吗?

  1. <div class="chart-wrapper" style="padding-left: 30px;">
  2. <canvas baseChart width="230" height="130" [datasets]="lineChartData" [labels]="lineChartLabels"
  3. [options]="lineChartOptions" [legend]="lineChartLegend" [type]="lineChartType">
  4. </canvas>
  5. </div>
  1. lineChartData: any[] = [
  2. {
  3. data: [71, 72, 73, 72, 74, 75 ,85, 72, 78, 75, 77, 75],
  4. borderWidth: 1,
  5. backgroundColor: 'gray',
  6. borderColor: 'black',
  7. pointBackgroundColor: 'black',
  8. pointBorderColor: 'black',
  9. pointHoverBackgroundColor: 'gray',
  10. pointHoverBorderColor: 'gray',
  11. tension:0
  12. },
  13. ];
  14. lineChartLabels: any[] = ['a', 'b', 'c', 'd', 'e', 'f','g', 'h', 'i', 'j', 'k', 'l'];
  15. lineChartOptions: ChartOptions = {
  16. responsive: true,
  17. elements: {
  18. point: {
  19. radius: 0,
  20. },
  21. line: {
  22. borderWidth: 1
  23. }
  24. }
  25. };
  26. lineChartLegend = false;
  27. lineChartPlugins = [];
  28. lineChartType: ChartType = 'line';
pkln4tw6

pkln4tw61#

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

  1. lineChartOptions: ChartOptions = {
  2. scales: {
  3. x: {
  4. grid: {
  5. display: false,
  6. },
  7. },
  8. y: {
  9. grid: {
  10. display: false,
  11. },
  12. },
  13. },
  14. };
7hiiyaii

7hiiyaii2#

要删除网格线,可以调整lineChartOptions,以指定不应同时显示x轴和y轴的网格线。
更新您的lineChartOptions如下:

  1. lineChartOptions: ChartOptions = {
  2. responsive: true,
  3. scales: {
  4. x: { // for x-axis
  5. grid: {
  6. display: false
  7. }
  8. },
  9. y: { // for y-axis
  10. grid: {
  11. display: false
  12. }
  13. }
  14. },
  15. elements: {
  16. point: {
  17. radius: 0,
  18. },
  19. line: {
  20. borderWidth: 1
  21. }
  22. }
  23. };
展开查看全部

相关问题