折线图¶

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

输入¶

属性	类型	默认值	描述
vi ew	n u m b e r [ ]		图表[宽度，高度]的尺寸。如果未定义，图表将适合于父容器的大小
re su lt s	o b j e c t [ ]		图表数据
sc he me	o b j e c t		图表的颜色方案
sc he me Ty pe	s t r i n g	‘ o r d i n a l ’	色阶类型。可以是 ‘ordinal’ 或 ‘linear’
cu st om Co lo rs	f u n c t i o n o r o b j e c t		自定义颜色图表。用于覆盖颜色的特定值
an im at io ns	b o o l e a n	t r u e	使动画
ra ng eF il lO pa ci ty	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 alwas the color of the central line.
le ge nd	b o o l e a n	f a l s e	显示或隐藏图例
le ge nd Ti tl e	s t r i n g	‘ L e g e n d ’	图例标题
le ge nd Po si ti on	s t r i n g	‘ r i g h t ’	图例位置 [‘right’, ‘below’]
xA xi s	b o o l e a n	f a l s e	显示或隐藏x轴
yA xi s	b o o l e a n	f a l s e	显示或隐藏y轴
sh ow Gr id Li ne s	b o o l e a n	t r u e	显示或隐藏网格线
ro un dD om ai ns	b o o l e a n	f a l s e	对于对齐网格线圆域
sh ow XA xi sL ab el	b o o l e a n	f a l s e	显示或隐藏x轴标签
sh ow YA xi sL ab el	b o o l e a n	f a l s e	显示或隐藏y轴标签
xA xi sL ab el	s t r i n g		X轴标签文本
yA xi sL ab el	s t r i n g		y轴标签文本
tr im XA xi sT ic ks	b o o l e a n	t r u e	修剪或不在x轴上蜱
tr im YA xi sT ic ks	b o o l e a n	t r u e	修剪或不蜱在Y轴上
ro ta te XA xi sT ic ks	b o o l e a n	t r u e	enable automic rotation of x-axis ticks to prevent overlaps
ma xX Ax is Ti ck Le ng th	n u m b e r	1 6	蜱的最大长度。如果 `trimXAxisTicks` 是 `True` ，那么蜱超过这个长度会被剪掉
ma xY Ax is Ti ck Le ng th	n u m b e r	1 6	蜱的最大长度。如果 `trimYAxisTicks` 是 `True` ，那么蜱超过这个长度会被剪掉
xA xi sT ic kF or ma tt in g	f u n c t i o n		x轴刻度格式
yA xi sT ic kF or ma tt in g	f u n c t i o n		y轴刻度格式
xA xi sT ic ks	a n y [ ]		x轴刻度值的预定义的列表
yA xi sT ic ks	a n y [ ]		Y的预定义列表轴的刻度值
ti me li ne	b o o l e a n	f a l s e	display a timeline control under the chart. Only available if a the x scale is linear or time
au to Sc al 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 (ignored if yScaleMin is defined)
cu rv e	f u n c t i o n		the interpolation function used to generate the curve. It accepts any d3.curve function
gr ad ie nt	b o o l e a n	f a l s e	具有梯度，而不是纯色填充元件
ac ti ve En tr ie s	o b j e c t [ ]		元素亮点
to ol ti pD is ab le d	b o o l e a n	f a l s e	显示或隐藏工具提示
to ol ti pT em pl at e	T e m p l a t e R e f		a custom ng-template to be displayed inside the tooltip when hovering a single point
se ri es To ol ti pT em pl at e	T e m p l a t e R e f		徘徊系列时，要在提示中显示的自定义NG-模板
re fe re nc eL in es	o b j e c t [ ]		an array of reference lines to be shown behind the chart. Every reference line should be of format {name, value}
sh ow Re fL in es	b o o l e a n	f a l s e	show or hide the reference lines
sh ow Re fL ab el s	b o o l e a n	t r u e	show or hide the reference line labels
xS ca le Mi n	a n y		the minimum value of the x axis (if the x scale is linear or time)
xS ca le Ma x	a n y		the maximum value of the x axis (if the x scale is linear or time)
yS ca le Mi n	n u m b e r		y轴的最小值
yS ca le Ma x	n u m b e r		y轴的最大值

输出¶

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

数据格式¶

Regular line charts¶

数据格式是多系列:

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

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

Line charts indicating the range of the data¶

The data format is multi series. Plus, the minimum and the maximum value of each data point are provided. For instance, you can use these values to show the error margin of your data. Another use case are cumulated data. The central line show the average values. The range shows indicates the distribution of the data.

[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000,
        "min": 7000000,
        "max": 7600000
      },
      {
        "name": "2011",
        "value": 8940000,
        "min": 8840000,
        "max": 9300000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000,
        "min": 7800000,
        "max": 7950000
      },
      {
        "name": "2011",
        "value": 8270000,
        "min": 8170000,
        "max": 8300000
      }
    ]
  }
]