垂直条形图

垂直条形图

{% embed data=“{“url”:”https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts”,”type”:”link”,”title”:”vertical-bar-chart - StackBlitz”,”description”:”Vertical Bar Chart demo for ngx-charts”,”icon”:{“type”:”icon”,”url”:”https://c.staticblitz.com/assets/icon-664493542621427cc8adae5e8f50d632f87aaa6ea1ce5b01e9a3d05b57940a9f.png”,”aspectRatio”:0},”thumbnail”:{“type”:”thumbnail”,”url”:”https://c.staticblitz.com/assets/icon-664493542621427cc8adae5e8f50d632f87aaa6ea1ce5b01e9a3d05b57940a9f.png”,”aspectRatio”:0}}” %}

输入

属性	类型	默认值	描述
view	number[]		图表[宽度，高度]的尺寸。如果未定义，图表将适合于父容器的大小
resul ts	obje ct[]		图表数据
schem e	obje ct		图表的颜色方案
计划类型	stri ng	‘o rd in al ’	色阶类型。可以是 ‘ordinal’ 或 ‘linear’
custo mColo rs	func tion or obje ct		自定义颜色图表。用于覆盖颜色的特定值
anima tions	bool ean	tr ue	使动画
legen d	bool ean	fa ls e	显示或隐藏图例
legendTitle	stri ng	‘L eg en d’	图例标题
legen dPosi tion	stri ng	‘r ig ht ’	图例位置 [‘right’, ‘below’]
xAxis	bool ean	fa ls e	显示或隐藏x轴
yAxis	bool ean	fa ls e	显示或隐藏y轴
showG ridLi nes	bool ean	tr ue	显示或隐藏网格线
round Domai ns	bool ean	fa ls e	对于对齐网格线圆域
showX AxisL abel	bool ean	fa ls e	显示或隐藏x轴标签
showY AxisL abel	bool ean	fa ls e	显示或隐藏y轴标签
xAxis Label	stri ng		X轴标签文本
yAxis Label	stri ng		y轴标签文本
trimX AxisT icks	bool ean	tr ue	修剪或不在x轴上蜱
trimY AxisT icks	bool ean	tr ue	修剪或不蜱在Y轴上
rotat eXAxi sTick s	bool ean	tr ue	enable automic rotation of x-axis ticks to prevent overlaps
maxXA xisTi ckLen gth	numb er	16	蜱的最大长度。如果 trimXAxisTicks 是 True ，那么蜱超过这个长度会被剪掉
maxYA xisTi ckLen gth	numb er	16	蜱的最大长度。如果 trimYAxisTicks 是 True ，那么蜱超过这个长度会被剪掉
xAxis TickF ormat ting	func tion		x轴刻度格式
yAxis TickF ormat ting	func tion		y轴刻度格式
xAxis Ticks	any[ ]		x轴刻度值的预定义的列表
yAxis Ticks	any[ ]		Y的预定义列表轴的刻度值
showD ataLa bel	bool ean	fa ls e	显示值旁边的数字杆
noBar WhenZ ero	bool ean	tr ue	隐藏栏，如果值是0，设置为true
gradi ent	bool ean	fa ls e	具有梯度，而不是纯色填充元件
activ eEntr ies	obje ct[]	[]	元素亮点
barPa dding	numb er	8	在PX条之间填充
toolt ipDis abled	bool ean	fa ls e	显示或隐藏工具提示
toolt ipTem plate	Temp late Ref		工具提示中要显示的自定义 ng-template
yScal eMax	numb er		the maximum value of the y axis (ignored if chart data contains a higher value)
yScal eMin	numb er		the minimum value of the y axis (ignored if chart data contains a lower value)
round Edges	bool ean	tr ue	round edges for the bars

输出

属性	描述
select	单击事件
activate	元件激活事件（鼠标输入）
deactivate	元件去激活事件（鼠标离开）

数据格式

数据格式为单系列:

[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]