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

g2-mini-bar 迷你柱状图

迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。

import { G2MiniBarModule } from '@delon/chart/mini-bar';

代码演示

基础

基础用法。

import { Component, OnInit } from '@angular/core';
import { G2MiniBarClickItem, G2MiniBarData } from '@delon/chart/mini-bar';
import format from 'date-fns/format';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'chart-mini-bar-basic',
  template: ` <g2-mini-bar height="45" [data]="visitData" (clickItem)="handleClick($event)"></g2-mini-bar> `,
})
export class ChartMiniBarBasicComponent implements OnInit {
  visitData: G2MiniBarData[] = [];
  constructor(private msg: NzMessageService) {}
  ngOnInit(): void {
    const beginDay = new Date().getTime();
    for (let i = 0; i < 20; i += 1) {
      this.visitData.push({
        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
        y: Math.floor(Math.random() * 100) + 10,
      });
    }
  }
  handleClick(data: G2MiniBarClickItem): void {
    this.msg.info(`${data.item.x} - ${data.item.y}`);
  }
}

Tooltip

指定 yTooltipSuffix 值来表示单位。

import { Component, OnInit } from '@angular/core';
import { G2MiniBarData } from '@delon/chart/mini-bar';
import format from 'date-fns/format';
@Component({
  selector: 'chart-mini-bar-tooltip',
  template: ` <g2-mini-bar height="45" [data]="visitData" yTooltipSuffix="%"></g2-mini-bar> `,
})
export class ChartMiniBarTooltipComponent implements OnInit {
  visitData: G2MiniBarData[] = [];
  ngOnInit(): void {
    const beginDay = new Date().getTime();
    for (let i = 0; i < 20; i += 1) {
      this.visitData.push({
        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
        y: Math.floor(Math.random() * 100) + 10,
      });
    }
  }
}

Mini tooltip

指定 tooltipType 值来表示简化tooltip，可以更好的运用于表格。

import { Component, OnInit } from '@angular/core';
import { G2MiniBarData } from '@delon/chart/mini-bar';
import format from 'date-fns/format';
@Component({
  selector: 'chart-mini-bar-mini',
  template: ` <g2-mini-bar height="45" [data]="visitData" yTooltipSuffix="%" tooltipType="mini"></g2-mini-bar> `,
})
export class ChartMiniBarMiniComponent implements OnInit {
  visitData: G2MiniBarData[] = [];
  ngOnInit(): void {
    const beginDay = new Date().getTime();
    for (let i = 0; i < 20; i += 1) {
      this.visitData.push({
        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
        y: Math.floor(Math.random() * 100) + 10,
      });
    }
  }
}

API

g2-mini-bar

G2MiniBarData