气泡图

{% embed data=“{“url”:”https://stackblitz.com/edit/swimlane-bubble-chart?embed=1&file=app/app.component.ts”,”type”:”link”,”title”:”bubble-chart - StackBlitz”,”description”:”Bubble 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	object[]		图表数据
schem e	object		图表的颜色方案
计划类型	string	‘ordinal ’	色阶类型。可以是 ‘ordinal’ 或 ‘linear’
custo mColo rs	funct ion or objec t		自定义颜色图表。用于覆盖颜色的特定值
anima tions	boole an	tr ue	使动画
legen d	boole an	fa ls e	显示或隐藏图例
legendTitle	strin g	‘L eg en d’	图例标题
legen dPosi tion	strin g	‘r ig ht ’	图例位置 [‘right’, ‘below’]
xAxis	boole an	fa ls e	显示或隐藏x轴
yAxis	boole an	fa ls e	显示或隐藏y轴
showG ridLi nes	boole an	tr ue	显示或隐藏网格线
round Domai ns	boole an	fa ls e	对于对齐网格线圆域
showX AxisL abel	boole an	fa ls e	显示或隐藏x轴标签
showY AxisL abel	boole an	fa ls e	显示或隐藏y轴标签
xAxis Label	strin g		X轴标签文本
yAxis Label	strin g		y轴标签文本
rotat eXAxi sTick s	boole an	tr ue	enable automic rotation of x-axis ticks to prevent overlaps
xAxis TickF ormat ting	funct ion		x轴刻度格式
yAxis TickF ormat ting	funct ion		y轴刻度格式
xAxis Ticks	any[]		x轴刻度值的预定义的列表
yAxis Ticks	any[]		Y的预定义列表轴的刻度值
activ eEntr ies	objec t[]	[]	元素亮点
minRa dius	numbe r	3	minimum bubble radius in px
maxRa dius	numbe r	10	maximum bubble radius in px
toolt ipDis abled	boole an	fa ls e	显示或隐藏工具提示
toolt ipTem plate	Templ ateRe f		工具提示中要显示的自定义 ng-template
xScal eMin	any		the minimum value of the x axis (if the x scale is linear or time)
xScal eMax	any		the maximum value of the x axis (if the x scale is linear or time)
yScal eMin	any		the minimum value of the y axis (if the y scale is linear or time)
yScal eMax	any		the maximum value of the y axis (if the y scale is linear or time)

输出

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

数据格式

Regular bubble charts

数据格式是多系列:

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "x": 40632,
        "y": 80.3,
        "r": 80.4
      },
      {
        "name": "2000",
        "x": 36953,
        "y": 80.3,
        "r": 78
      },
      {
        "name": "1990",
        "x": 31476,
        "y": 75.4,
        "r": 79
      }
    ]
  },
  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "x": 49737,
        "y": 78.8,
        "r": 310
      },
      {
        "name": "2000",
        "x": 45986,
        "y": 76.9,
        "r": 283
      },
      {
        "name": "1990",
        "x": 3706,
        "y": 75.4,
        "r": 253
      }
    ]
  },
  {
    "name": "France",
    "series": [
      {
        "name": "2010",
        "x": 36745,
        "y": 81.4,
        "r": 63
      },
      {
        "name": "2000",
        "x": 34774,
        "y": 79.1,
        "r": 59.4
      },
      {
        "name": "1990",
        "x": 29476,
        "y": 77.2,
        "r": 56.9
      }
    ]
  },
  {
    "name": "United Kingdom",
    "series": [
      {
        "name": "2010",
        "x": 36240,
        "y": 80.2,
        "r": 62.7
      },
      {
        "name": "2000",
        "x": 32543,
        "y": 77.8,
        "r": 58.9
      },
      {
        "name": "1990",
        "x": 26424,
        "y": 75.7,
        "r": 57.1
      }
    ]
  }
]