分组水平条形图¶

{% embed
data=“{"url":"https://stackblitz.com/edit/swimlane-grouped-horizontal-bar-chart?embed=1&file=app/app.component.ts","type":"link","title":"grouped-horizontal-bar-chart
- StackBlitz","description":"Grouped Horizontal 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[]		图表[宽度，高度]的尺寸。如果未定义，图表将适合于父容器的大小
results	object[]		图表数据
scheme	object		图表的颜色方案
schemeType	string	‘ordinal ’	色阶类型。可以是 ‘ordinal’ 或 ‘linear’
customColors	function or object		自定义颜色图表。用于覆盖颜色的特定值
animations	boolean	true	使动画
legend	boolean	false	显示或隐藏图例
legendTitle	string	‘legend’	图例标题
legendPosition	string	‘right’	图例位置 [‘right’, ‘below’]
xAxis	boolean	false	显示或隐藏x轴
yAxis	boolean	false	显示或隐藏y轴
showGridLines	boolean	true	显示或隐藏网格线
roundDomains	boolean	false	对于对齐网格线圆域
showXAxisLabel	boolean	false	显示或隐藏x轴标签
showYAxisLabel	boolean	false	显示或隐藏y轴标签
xAxisLabel	string		X轴标签文本
yAxisLabel	string		y轴标签文本
showDataLabel	boolean	false	显示值旁边的数字杆
gradient	boolean	false	具有梯度，而不是纯色填充元件
noBarWhenZero	boolean	true	隐藏栏，如果值是0，设置为true
trimXAxisTicks	boolean	true	修剪或不在x轴上蜱
trimYAxisTicks	boolean	true	修剪或不蜱在Y轴上
maxXAxisTickLength	number	16	蜱的最大长度。如果 `trimXAxisTicks` 是 `True` ，那么蜱超过这个长度会被剪掉
maxYAxisTickLength	number	16	蜱的最大长度。如果 `trimYAxisTicks` 是 `True` ，那么蜱超过这个长度会被剪掉
xAxisTickFormatting	function		x轴刻度格式
yAxisTickFormatting	function		y轴刻度格式
xAxisTicks	any[]		x轴刻度值的预定义的列表
yAxisTicks	any[]		Y的预定义列表轴的刻度值
activeEntries	object[]	[]	元素亮点
barPadding	number	8	在PX条之间填充
groupPadding	number	16	在像素组之间的填充
tooltipDisabled	boolean	false	显示或隐藏工具提示
tooltipTemplate	TemplateRef		工具提示中要显示的自定义 ng-template
xScaleMax	number		（如果忽略图表数据中包含更高的值）x轴的最大值

输出¶

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

数据格式¶

数据格式是多系列:

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  }
]