ng2-chartjs2 Ionic 2 Как добавить параметры

#angular #ionic2 #ng2-charts

#angular #ionic2 #ng2-графики

Вопрос:

Я сделал небольшой проект ionic2 с графиками ng2-chartjs2 на основе этого проекта. Мне нужно добавить параметры, а документации о том, как это добавить, нет. вот репозиторий моего проекта

Фрагмент кода моих опций.

 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>

Любой совет был бы полезен.

1. Вы взглянули на их демо-версию? github.com/zyramedia/ng2-chartjs2/blob/master/demo.ts Это довольно просто

2. Спасибо @misha130 за ответ. Да, я использовал эту демонстрацию для создания своего проекта, и она работает хорошо, но мне нужно использовать опции, как показано по этой ссылке . Я знаю, что есть способ использовать тег options, поскольку тег options представлен с помощью диаграммы. Интерфейс опций. Но я не знаю как.

Ответ №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>

У меня это работает.

Ответ №2:

Структура диаграммы.Параметры, определенные в кодовой базе, являются

 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
   }
}