angular - ng2-chartjs2 Ionic 2 如何添加选项

Question

我基于这个项目做了一个带有 ng2-chartjs2 图表的小型 ionic2项目。我需要添加选项，并且没有关于如何添加它的文档。这是我的项目回购

我的选项代码片段。

options: Chart.Options[] = [{
    responsive: true, //red squiggly line here
    animation:false,
    defaultFontColor:"#666"
  }];

主页.html

 <chart [labels]="labels" [data]="data" [options]="options" type="bar"></chart>

任何意见将是有益的。

Answer 1

试试这个：

1) main.ts

export class MainPage {

  options: any = {
    type: 'doughnut',
    data: {
      labels: ["Restaurante", "Vestuário", "Lazer", "Eletrônico"],
      datasets: [{
        label: 'Dinheiro',
        borderWidth: 0,
        data: [12, 19, 3, 5],
        backgroundColor: [
          '#FDBC11',
          '#ee4250',
          '#02A4C0',
          '#229f37'
        ],
      }]
    },
    options: {
      responsive: true,
      legend: {
        position: 'left',
        labels: {
          boxWidth: 20
        }
      }
    }
  };}

2) main.html

<chart [options]="options" ></chart>

这对我有用。

Answer 2

代码库中定义的 Chart.Options 结构是

export interface Options {
    type: Type;
    data: {
      labels: string[];
      datasets: Dataset[];
    };
    options?: {
      tooltips?: {
        custom?: Function;
      };
      legend?: LegendConfiguration;
      scales?: {
        yAxes?: Array<{ticks?: {beginAtZero: boolean}}>
      };
      responsive?: boolean;
      responsiveAnimationDuration?: number;
      maintainAspectRation?: boolean;
      events?: string[];
      onClick?: Function;
      legendCallback?: Function;
      onResize?: Function;
      title?: TitleConfiguration;
      hover?: HoverConfiguration;
      pan?: {
        enabled?: boolean;
        mode?: string;
      },
      zoom?: {
        enabled?: boolean;
        mode?: string;
      }
    };
  }

将选项的结构更改为上述格式，以避免编译错误。

options: Chart.Options = {
   type: , // type of the chart -- mandatory
   data: {}, // mandatory
   options: { //optional
      responsive: true,
      responsiveAnimationDuration: 0
   }
}