ng2-chartjs2 Ionic 2 如何添加选项

Question

我用基于 ng2-chartjs2 图表的 ionic2 做了一个小项目 on this project. I need to add options and there's no documentation on how to add it. here is my project repo

我的选项代码片段。

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

home.html

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

任何建议都会有所帮助。

Answer 1

在 codebase 处定义的 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的结构改成上面的格式，避免编译错误。

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

Answer 2

试试这个：

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>

这对我有用。

ng2-chartjs2 Ionic 2 如何添加选项

ng2-chartjs2 Ionic 2 How to add options

ionic2

ng2-charts

angular