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

g2-timeline 折线图

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

import { G2TimelineModule } from '@delon/chart/timeline';

代码演示

基础

带有时间轴的图表。

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}`);
  }
}

多指标

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

import { Component, OnInit } from '@angular/core';
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
@Component({
  selector: 'chart-timeline-max-axis',
  template: ` <g2-timeline maxAxis="5" [data]="chartData" [titleMap]="titleMap" [height]="300"></g2-timeline>`,
})
export class ChartTimelineMaxAxisComponent implements OnInit {
  chartData: G2TimelineData[] = [];
  titleMap: G2TimelineMap = { y1: '指标1', y2: '指标2', y3: '指标3', y4: '指标4', y5: '指标5' };
  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) + 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,
      });
    }
  }
}

时间格式化

利用 mask 和 maskSlider 来改变时间格式。

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

G2TimelineData

G2TimelineMap