Demos
코드 샘플
API
사용자정의 차트 디자이너

Public API - 사용자 정의 차트 디자이너

ActiveReportsJS는 보고서를 프로그래밍 방식으로 만들 수 있는 API를 제공합니다. 다음 예에서는 런타임에 차트를 만드는 방법을 보여 줍니다.

data.ts
report.service.ts
app.component.html
app.component.ts
app.component.css
index.html
export enum ChartDataType {
  SalesOverTime = 'SalesOverTime',
  SalesPerChannel = 'SalesPerChannel',
  SalesPerCategory = 'SalesPerCategory',
}

export type DataItem = {
  value: string;
  label?: string;
};

export const ChartPalettes: DataItem[] = [
  { value: 'Office' },
  { value: 'Light' },
  { value: 'Dark' },
  { value: 'Blue' },
  { value: 'Orange' },
];

export const ChartDataTypes: DataItem[] = [
  { value: ChartDataType.SalesOverTime, label: 'Sales over time' },
  { value: ChartDataType.SalesPerChannel, label: 'Sales per channel' },
  { value: ChartDataType.SalesPerCategory, label: 'Sales per category' },
];

export const TimePlotTypes: DataItem[] = [{ value: 'Line' }, { value: 'Area' }];

export const CategoryPlotTypes: DataItem[] = [
  { value: 'Bar' },
  { value: 'Column' },
];

export const ChannelPlotTypes: DataItem[] = [
  { value: 'Pie' },
  { value: 'Donut' },
];

export const getPlotTypes = (dataType: ChartDataType): DataItem[] => {
  switch (dataType) {
    case ChartDataType.SalesOverTime:
      return TimePlotTypes;
    case ChartDataType.SalesPerChannel:
      return ChannelPlotTypes;
    case ChartDataType.SalesPerCategory:
      return CategoryPlotTypes;
    default:
      return [];
  }
};