如何在运行时更改 ng2-charts 的刻度选项？

Question

如何在运行时间更新报价选项？它没有任何效果。

Answer 1

您必须在 onClick() 中再次更新整个 lineChartOptions 对象才能看到效果：

相关TS:

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartDataSets, ChartOptions, TickOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public lineChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
  ];
  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
    scales: {
      yAxes: [
        {
          position: 'right',
          ticks: {
            max: 50,
            min: 10
          }
        }
      ]
    }
  };
  public lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,0,0,0.3)',
    },
  ];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [];

  constructor() { }

  ngOnInit() {
  }

  onClick() {
    const newMin=10;
    const newMax=30;
    const tickOptions: TickOptions = {
      newMin,
      newMax
    };

    let original = this.lineChartOptions;
//    this.lineChartOptions = null;

//    original.scales.yAxes[0].ticks = tickOptions;
//    original.scales.yAxes[0].position = 'right';
//    this.lineChartOptions = original;

  this.lineChartOptions = {
    responsive: true,
    scales: {
      yAxes: [
        {
          position: 'right',
          ticks: tickOptions
        }
      ]
    }
  };

    console.log("Updated scales");
  }
}

现有stackblitz here

Answer 2

这是我更新图表选项（在我的例子中是比例尺）的解决方案：

let options =  this.lineChartOptions;    
options.scales.xAxes[0].ticks.min = 0;
options.scales.xAxes[0].ticks.callback = (v: number) => v * -1;      
this.lineChartOptions = {...options};

之后无需更新图表。

如何在运行时更改 ng2-charts 的刻度选项？

How do you change the tick options for ng2-charts at runtime?

ng2-charts

angular