面积图系列

面积图是另一种显示量化数据的方式。 它连接所有的数据点和时间轴并使用颜色标明。

数据系列区域会显示十字准星线 - 沿着系列线移动的圆形标记,同时光标沿着时间刻度在图表上移动。

面积图示例

如何创建面积系列

  1. const areaSeries = chart.addAreaSeries();
  2. // set the data
  3. areaSeries.setData([
  4. { time: "2018-12-22", value: 32.51 },
  5. { time: "2018-12-23", value: 31.11 },
  6. { time: "2018-12-24", value: 27.02 },
  7. { time: "2018-12-25", value: 27.32 },
  8. { time: "2018-12-26", value: 25.17 },
  9. { time: "2018-12-27", value: 28.89 },
  10. { time: "2018-12-28", value: 25.46 },
  11. { time: "2018-12-29", value: 23.92 },
  12. { time: "2018-12-30", value: 22.68 },
  13. { time: "2018-12-31", value: 22.67 }
  14. ]);

数据格式

每个面积系列项应具有以下字段:

  • time (时间) - 项目时间
  • value (number) - 项目值

定制

面积系列的上面一行提供了颜色、样式、宽度的设置选项。a series.

可以为面积的上面和下面设置不同的颜色。这些颜色在该区域的中间互相融合。

另外,默认情况下启用的十字准星线可以被禁用或调整其半径。

可以使用以下选项,自定义面积系列:

名称类型默认值描述
topColorstringrgba(46, 220, 135, 0.4)面积上面颜色
bottomColorstringrgba(40, 221, 100, 0)面积下面颜色
lineColorstring#33D778线的颜色
lineStyle线的样式LineStyle.Solid线的样式
lineWidthnumber3线宽(像素)
crosshairMarkerVisiblebooleantrue如果为 true,则显示十字准星线
crosshairMarkerRadiusnumber4十字标记的半径(以像素为单位)

例子

  • 设置面积系列的初始选项:
  1. const areaSeries = chart.addAreaSeries({
  2. topColor: "rgba(21, 146, 230, 0.4)",
  3. bottomColor: "rgba(21, 146, 230, 0)",
  4. lineColor: "rgba(21, 146, 230, 1)",
  5. lineStyle: 0,
  6. lineWidth: 3,
  7. crosshairMarkerVisible: false,
  8. crosshairMarkerRadius: 3
  9. });
  • 创建系列后更改选项:
  1. // 例如,让我们仅覆盖线宽和颜色
  2. areaSeries.applyOptions({
  3. lineColor: "rgba(255, 44, 128, 1)",
  4. lineWidth: 1
  5. });

What's next