angular - 有没有办法改变 y 轴图表网格的颜色 - ng2-charts

Question

我正在使用 ng2-charts 在我的项目中显示图表，但找不到更改网格表颜色的方法。我想根据其速率更改表格的网格颜色。例如，在 1 到 20 之间，我希望它是蓝色的，在 21 到 40 之间，我希望它是绿色的，等等..

这就是我想做的/image/HL5JZ.png

组件.ts

public lineChartData:Array<any> = [
    {data: [79, 22, 87, 12], label:'Series A'}
  ];
  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April'];
  public lineChartOptions:any = {
    responsive: true
  };
  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = false;
  public lineChartType:string = 'line';
  public chartColors: Array<any> = [
    { // first color
      backgroundColor: 'red',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    }
    ];

组件.html

<div style="display: block;">
                                <canvas baseChart width="400" height="200"
                                            [datasets]="lineChartData"
                                            [labels]="lineChartLabels"
                                            [options]="lineChartOptions"
                                            [colors]="lineChartColors"
                                            [legend]="lineChartLegend"
                                            [chartType]="lineChartType"
                                            (chartHover)="chartHovered($event)"
                                            (chartClick)="chartClicked($event)">

                                </canvas>
                            </div>

Answer 1

是!! 这可以使用名为 - chartjs-plugin-annotation 的 ChartJS 插件来实现。 .

这是一个例子:

渲染图表

使用的代码

组件.ts

import { Component } from '@angular/core';
import 'chartjs-plugin-annotation';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    public chartType: string = 'line';
    public chartLabels: string[] = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
    public chartData: any[] = [{
        data: [3, 1, 4, 2, 5],
        label: 'Anthracnose',
        fill: false
    }];
    public chartColors: any[] = [{
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        borderColor: 'rgba(0, 0, 0, 1)'
    }];
    public chartOptions: any = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        annotation: {
            drawTime: 'beforeDatasetsDraw',
            annotations: [{
                type: 'box',
                id: 'a-box-1',
                yScaleID: 'y-axis-0',
                yMin: 0,
                yMax: 1,
                backgroundColor: '#4cf03b'
            }, {
                type: 'box',
                id: 'a-box-2',
                yScaleID: 'y-axis-0',
                yMin: 1,
                yMax: 2.7,
                backgroundColor: '#fefe32'
            }, {
                type: 'box',
                id: 'a-box-3',
                yScaleID: 'y-axis-0',
                yMin: 2.7,
                yMax: 5,
                backgroundColor: '#fe3232'
            }]
        }
    }
}

组件.html

<div class="chart-container">
  <canvas baseChart
          [chartType]="chartType"
          [labels]="chartLabels"
          [datasets]="chartData"
          [colors]="chartColors"
          [options]="chartOptions">
  </canvas>
</div>