Question

我正在同一行上使用多个chart.js设置一些数据。现在，出于响应模式下法律空间的原因，我需要覆盖默认的预设选项，以便隐藏yAxes，这对我的需求没有用。

在用Angular 7编写的应用程序中，我实现了chart.js库，并且类型（如数据）直接在选择器中实现。

这就是我开始的地方：

我的component.ts中的默认步骤：

export class ChartJsComponent implements AfterContentInit {

  @Input() public data:any;
  @Input() public type:string;
  @Input() width:string = '100%';



  constructor(private el:ElementRef) {
  }

  ngAfterContentInit() {

    let ctx = this.getCtx();
    let data = this.data;

    if(data.datasets && data.datasets.length && presets[this.type] && presets[this.type].dataset){
      data.datasets =  data.datasets.map((it)=>{
        return Object.assign({}, presets[this.type].dataset, it)
      })
    }

    let chart = new Chart(ctx, {
      type: this.type,
      data: data,
      options: presets[this.type] ? presets[this.type].options : {}
    });
    chart.update();

  }

我尝试了更新：

let chart = new Chart(ctx, {
      type: this.type,
      data: data,
      options: presets[this.type] ? presets[this.type].options : {
        scales: {
          yAxes: {
            display: false
          }
        }
      }
    });
    chart.update();

我也在我的component.html中尝试过这种方法：

<sa-chart-js
  type="pie"
  [data]="{//omitted}"
  [options]="[{
    scales:{
      yAxes:{
        display: false
      }
    }
   }]">
</sa-chart-js>

但似乎没有任何作用。

我想直接在选择器中覆盖该选项，但是，今天我不知道该怎么做。

Answer 1

xAxes和yAxes属性是数组，因为chart.js支持每个都有多个轴。您需要将代码更改为轴对象数组，而不是对象。

yAxes: [{
  display: false
}]

如何在角度选择器中检索和覆盖预设chart.js选项？

1 个答案: