This article has not been translated, hope that your can PR to translated it. Help us!

折线图
IMPORT MODULE

使用 timeline 组件可以实现带有时间轴的柱状图展现,而其中的 x 属性,则是时间值的指向,默认最多支持同时展现两个指标,分别是 y1y2

Examples

Basic

带有时间轴的图表。

expand codeexpand code
import { Component, OnInit } from '@angular/core';
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'chart-timeline-basic',
  template: ` <g2-timeline
    [data]="chartData"
    [titleMap]="{ y1: '客流量', y2: '支付笔数' }"
    [height]="200"
    (clickItem)="handleClick($event)"
  ></g2-timeline>`,
})
export class ChartTimelineBasicComponent implements OnInit {
  chartData: G2TimelineData[] = [];

  constructor(private msg: NzMessageService) {}

  ngOnInit(): void {
    for (let i = 0; i < 20; i += 1) {
      this.chartData.push({
        time: new Date().getTime() + 1000 * 60 * 30 * i,
        y1: Math.floor(Math.random() * 100) + 1000,
        y2: Math.floor(Math.random() * 100) + 10,
      });
    }
  }

  handleClick(data: G2TimelineClickItem): void {
    this.msg.info(`客流量: ${data.item.y1}, 支付笔数: ${data.item.y2}`);
  }
}

Multiple indicators

利用 maxAxis 属性来调整多个指标,最多支持 5 个指标值。

expand codeexpand code
import { Component } from '@angular/core';
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';

@Component({
  selector: 'chart-timeline-max-axis',
  template: `
    <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
    <button nz-button (click)="refreshData()" nzType="primary">Refresh Data</button>
    <g2-timeline [maxAxis]="maxAxis" [data]="chartData" [titleMap]="titleMap" [height]="300"></g2-timeline>
  `,
})
export class ChartTimelineMaxAxisComponent {
  chartData: G2TimelineData[] = [];
  titleMap: G2TimelineMap = { y1: '指标1', y2: '指标2' };
  maxAxis = 5;

  constructor() {
    this.refresh();
  }

  private genData(hideY5: boolean): G2TimelineData[] {
    const res: G2TimelineData[] = [];
    for (let i = 0; i < 20; i += 1) {
      const item: G2TimelineData = {
        time: new Date().getTime() + 1000 * 60 * 30 * i,
        y1: Math.floor(Math.random() * 100) + 500,
        y2: Math.floor(Math.random() * 100) + 1000,
        y3: Math.floor(Math.random() * 100) + 1500,
        y4: Math.floor(Math.random() * 100) + 2000,
        y5: Math.floor(Math.random() * 100) + 2500,
      };
      if (hideY5) delete item.y5;
      res.push(item);
    }
    return res;
  }

  refresh(): void {
    const titleMap: G2TimelineMap = { y1: '指标1', y2: '指标2', y3: '指标3', y4: '指标4', y5: '指标5' };
    const hideY5 = Math.random() > 0.5;
    if (hideY5) delete titleMap.y5;
    this.chartData = this.genData(hideY5);
    this.titleMap = titleMap;
    this.maxAxis = hideY5 ? 4 : 5;
  }

  refreshData(): void {
    this.chartData = this.genData(this.maxAxis === 4);
  }
}

Time mask format

利用 maskmaskSlider 来改变时间格式。

expand codeexpand code
import { Component, OnInit } from '@angular/core';
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'chart-timeline-mask',
  template: ` <g2-timeline
    [data]="chartData"
    [titleMap]="{ y1: '客流量', y2: '支付笔数' }"
    [height]="200"
    mask="MM月DD日"
    maskSlider="MM月dd日"
    (clickItem)="handleClick($event)"
  ></g2-timeline>`,
})
export class ChartTimelineMaskComponent implements OnInit {
  chartData: G2TimelineData[] = [];

  constructor(private msg: NzMessageService) {}

  ngOnInit(): void {
    for (let i = 0; i < 20; i += 1) {
      this.chartData.push({
        time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
        y1: Math.floor(Math.random() * 100) + 1000,
        y2: Math.floor(Math.random() * 100) + 10,
      });
    }
  }

  handleClick(data: G2TimelineClickItem): void {
    this.msg.info(`客流量: ${data.item.y1}, 支付笔数: ${data.item.y2}`);
  }
}

API

g2-timeline

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string,TemplateRef<void>-
[maxAxis]最大指标数量number2
[data]数据G2TimelineData[]-
[titleMap]指标别名G2TimelineMap-
[colorMap]颜色G2TimelineMap{ y1: '#5B8FF9', y2: '#5AD8A6', y3: '#5D7092', y4: '#F6BD16', y5: '#E86452' }
[height]高度值number400
[padding]图表内部间距number[][40, 8, 64, 40]
[borderWidth]线条number2
[mask]日期格式,使用 G2 Mask日期格式stringHH:mm
[maskSlider]滑动条日期格式,使用 date-fns 日期格式stringHH:mm
[position]标题位置'top','right','bottom','left''top'
[slider]是否需要滑动条booleantrue
[theme]定制图表主题string | LooseObject-
(clickItem)点击项回调EventEmitter<G2TimelineClickItem>-
(ready)当G2完成初始化后调用EventEmitter<Chart>-

G2TimelineData

参数说明类型默认值
[time]日期格式Date | number-
[y1]指标1数据number-
[y2]指标2数据number-
[y3]指标3数据number-
[y4]指标4数据number-
[y5]指标5数据number-

G2TimelineMap

参数说明类型默认值
[y1]指标1string-
[y2]指标2string-
[y3]指标3string-
[y4]指标4string-
[y5]指标5string-