时间戳

首页 > 解决方案 > 如何在角度选择器中检索和覆盖预设 chart.js 选项？

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

问题描述

我在同一行上设置了一些带有多个 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>

但似乎没有任何效果。

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

标签： angulartypescriptchart.js

解决方案

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

yAxes: [{
  display: false
}]

推荐阅读