Question

我使用基于on this project的ng2-chartjs2图表做了一个小的ionic2项目。我需要添加选项，而且没有关于如何添加选项的文档。这是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

试试这个：

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

在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: Chart.Options = {
   type: , // type of the chart -- mandatory
   data: {}, // mandatory
   options: { //optional
      responsive: true,
      responsiveAnimationDuration: 0
   }
}

ng2-chartjs2 Ionic 2如何添加选项

2 个答案: