面积图

面积图的可配置选项。

面积图是一种以折线图为基础的图表,它通过填充线下方的区域来展示数据。与折线图相比,面积图强调了数据的总量变化和不同部分之间的关系。

适合的场景有:

  1. 展示数据量的变化:特别是需要展示某个量随时间或类别的变化趋势,并且想突出数据总量的变化或堆积效应时,面积图非常有效。
  2. 展示部分与整体的关系:当你需要显示多个数据系列并且比较它们之间的比例时,面积图(尤其是堆积面积图)可以清晰地表达各个部分对总体的贡献。
  3. 表现数据的累积量:适用于需要显示某个量的累计变化或总和变化的场景。

基础模式

基础模式下,绘制面积图需要给出:

  1. 横坐标(X)和数据(Data):通过下拉框选择列,它们是必需的。
  2. 配色方案(Color scheme):通过下拉框选择,默认为「默认」配色方案。
  3. 模版(Template):通过「更换」按钮进行选择,不选择则使用默认的模版。
  4. 可见性(Visibility):指定横坐标X、纵坐标Y、提示、图例是否显示,默认显示横坐标和光标触发的提示。

高级模式

高级模式下,可以调整更多的选项值。

坐标轴

包括X和Y轴。

  • 对应列(X、Y):通过下拉框从数据的列中选择。X是必选的,Y是可选的,当Y未选择列时,会自适应进行绘制。
  • 可见性:通过前面的切换按钮进行控制。
  • 轴线颜色:默认为 ,表示不显示,可以点击后从调色板选择或者输入HEX值指定自己喜欢的颜色, 为使用默认颜色。
  • 轴线宽度:指定轴线的粗细。

刻度和标签:

  • 标签(Label):可以配置颜色、字体粗细、旋转角度。
  • 格式(Format):使用公式来对标签文本进行处理。
  • 刻度线(Line):默认不显示,显示后可以配置粗细、长度。
  • 布局(Layout):可以配置刻度间的最小间距、刻度线和标签间的间距。
  • 数值类型(Numeric):当坐标轴对应列为数值类型时,可以指定刻度的数量。
  • 内部显示(Inside):控制刻度和标签在坐标轴内还是外部显示。

图表/面积

图表可以绘制多个面积,通过面板右上角的 来增加或者删除面积。

对于每个面积,选项包括:

  • 数据(Data):通过下拉框从数据的列中选择。
  • 线(Line):用于配置面积边线对应的数据连接线和数据点描边的样式。可以配置类型,包括直线(linear)、自然曲线(natural)、曲线(monotone)、台阶线(step),此外还可以配置颜色、粗细、虚线类型。
  • 点(Dot):用于配置面积边线上的数据点的样式。可以配置填充颜色、半径。可以独立配置光标焦点(Active)时的样式。
  • 填充(Fill):用于配置面积填充部分的颜色、不透明度、是否开启渐进式颜色。
  • 标签(Label):默认不显示数据点的标签,当选择显示时,可以配置颜色、字号、位置、偏移。

布局

包括:

  • 边距(Margin):配置绘图区域(包括坐标轴)的上下左右边距。
  • 网格线(Grid):可以分别配置水平和垂直网格线是否显示。
  • 堆积(Stack):多个面积是否堆积和堆积的样式,默认为使用堆积。如果需要展示多个数据系列之间的关系,可以选择堆积面积图。每个数据系列的区域会堆积在之前的数据系列上,显示各部分对总体的贡献。

描述

用于配置图表的补充信息的显示。

  • 标题(Title):图表的标题,位于图表的顶部。
  • 描述(Description):图表的描述,位于标题下方。
  • 底部(Footer):图表的底部文字,位于图表的底部。
  • 提示(Tooltip):可以配置是否显示、偏移、光标线是否显示。
  • 图例(Legend):可以配置是否显示、在图表上的位置,默认为图表的底部,在X轴下方和底部文字上方。