极地/雷达图

极地/雷达图

{% embed data=“{“url”:”https://stackblitz.com/edit/swimlane-polar-chart?embed=1&file=app/app.component.ts”,”type”:”link”,”title”:”polar-chart - StackBlitz”,”description”:”Polar / Radar 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}}” %}

输入

P r o p e r t y

T y p e

D e f a u l t V a l u e

描述

v i e w

n u m b e r [ ]

图表[宽度,高度]的尺寸。如果未定义,图表将适合于父容器的大小

r e s u l t s

o b j e c t [ ]

图表数据

s c h e m e

o b j e c t

图表的颜色方案

s c h e m e T y p e

s t r i n g

‘ o r d i n a l ’

色阶类型。可以是 ‘ordinal’ 或 ‘linear’

c u s t o m C o l o r s

f u n c t i o n o r o b j e c t

自定义颜色图表。用于覆盖颜色的特定值

a n i m a t i o n s

b o o l e a n

t r u e

使动画

r a n g e F i l l O p a c i t y

n u m b e r

1 5

opacity of the shadow around the line indication the (optional) min and max values. The range shadow is only displayed if min and max values are provided with the data. The color of the shadow is always the color of the central line.

l e g e n d

b o o l e a n

f a l s e

显示或隐藏图例

l e g e n d T i t l e

s t r i n g

‘ L e g e n d ’

图例标题

l e g e n d P o s i t i o n

s t r i n g

‘ r i g h t ’

图例位置 [‘right’, ‘below’]

x A x i s

b o o l e a n

f a l s e

显示或隐藏x轴

y A x i s

b o o l e a n

f a l s e

显示或隐藏y轴

s h o w G r i d L i n e s

b o o l e a n

t r u e

显示或隐藏网格线

r o u n d D o m a i n s

b o o l e a n

f a l s e

对于对齐网格线圆域

s h o w X A x i s L a b e l

b o o l e a n

f a l s e

显示或隐藏x轴标签

s h o w Y A x i s L a b e l

b o o l e a n

f a l s e

显示或隐藏y轴标签

x A x i s L a b e l

s t r i n g

X轴标签文本

y A x i s L a b e l

s t r i n g

y轴标签文本

l a b e l T r i m

b o o l e a n

t r u e

trim the labels beyond a certain maximum length

l a b e l T r i m S i z e

n u m b e r

1 0

maximum length of the labels. If labelTrim is true, labels over this length will be trimmed

t r i m Y A x i s T i c k s

b o o l e a n

t r u e

修剪或不蜱在Y轴上

m a x Y A x i s T i c k L e n g t h

n u m b e r

1 6

蜱的最大长度。如果 trimYAxisTicksTrue ,那么蜱超过这个长度会被剪掉

x A x i s T i c k F o r m a t t i n g

f u n c t i o n

x轴刻度格式

y A x i s T i c k F o r m a t t i n g

f u n c t i o n

y轴刻度格式

a u t o S c a l e

b o o l e a n

f a l s e

set the minimum value of the y axis to the minimum value in the data, instead of 0

c u r v e

f u n c t i o n

the interpolation function used to generate the curve. It accepts any d3.curve function

a c t i v e E n t r i e s

o b j e c t [ ]

元素亮点

t o o l t i p D i s a b l e d

b o o l e a n

f a l s e

显示或隐藏工具提示

s h o w S e r i e s O n H o v e r

b o o l e a n

t r u e

show or hide all points on the line on hover

t o o l t i p T e m p l a t e

T e m p l a t e R e f

工具提示中要显示的自定义 ng-template

y A x i s M i n S c a l e

n u m b e r

force y axis scaling to the provided value (ignored if chart data contains a higher value)

输出

属性

描述

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
      }
    ]
  }
]