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

柱状图
IMPORT MODULE

使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。

代码演示

销售额趋势

基本

通过设置 xy 属性,可以快速的构建出一个漂亮的柱状图,各种纬度的关系则是通过自定义的数据展现。

expand codeexpand code
import { Component } from '@angular/core';
import { G2BarClickItem, G2BarData } from '@delon/chart/bar';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'chart-bar-basic',
  template: `
    <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
    <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>
  `,
})
export class ChartBarBasicComponent {
  constructor(private msg: NzMessageService) {}

  salesData = this.genData();

  private genData(): G2BarData[] {
    return new Array(12).fill({}).map((_i, idx) => ({
      x: `${idx + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200,
      color: idx > 5 ? '#f50' : undefined,
    }));
  }

  refresh(): void {
    this.salesData = this.genData();
  }

  handleClick(data: G2BarClickItem): void {
    this.msg.info(`${data.item.x} - ${data.item.y}`);
  }
}

API

g2-bar

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string,TemplateRef<void>-
[color]图表颜色stringrgba(24, 144, 255, 0.85)
[padding]图表内部间距Array<number | string> | string[32, 0, 32, 40]
[height]图表高度number-
[data]数据G2BarData[][]
[autoLabel]在宽度不足时,自动隐藏 x 轴的 labelbooleantrue
[interaction]交互类型,none 无 element-active 图形元素,active-region 图表组件,brush 框选,drag-move 移动InteractionTypenone
[theme]定制图表主题string | LooseObject-
(clickItem)点击项回调EventEmitter<G2BarClickItem>-
(ready)当G2完成初始化后调用EventEmitter<Chart>-

G2BarData

参数说明类型默认值
[x]x轴any-
[y]y轴any-
[color]轴颜色string-