折线图系列

折线图是一种图表,它将系列数据点连接成直线。

线系列有一个十字准线标记 - 一个圆形标记,当光标沿着时间刻度移动时,它沿着系列线移动。

折线图例子

如何创建折线图系列

  1. const lineSeries = chart.addLineSeries();
  2. // set data
  3. lineSeries.setData([
  4. { time: "2018-12-01", value: 32.51 },
  5. { time: "2018-12-02", value: 31.11 },
  6. { time: "2018-12-03", value: 27.02 },
  7. { time: "2018-12-04", value: 27.32 },
  8. { time: "2018-12-05", value: 25.17 },
  9. { time: "2018-12-06", value: 28.89 },
  10. { time: "2018-12-07", value: 25.46 },
  11. { time: "2018-12-08", value: 23.92 },
  12. { time: "2018-12-09", value: 22.68 },
  13. { time: "2018-12-10", value: 22.67 },
  14. { time: "2018-12-11", value: 27.57 },
  15. { time: "2018-12-12", value: 24.11 },
  16. { time: "2018-12-13", value: 30.74 }
  17. ]);

数据格式

可以使用以下选项自定义折线图系列:

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

定制

线条本身可以通过设置颜色,宽度和样式来定制。

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

可以使用以下选项自定义:

名称类型默认值描述
colorstring#2196f3线条颜色
lineStyleLineStyleLineStyle.Solid线条样式
lineWidthnumber3线宽(以像素为单位)
crosshairMarkerVisiblebooleantrue如果为true,则十字标记显示在图表上
crosshairMarkerRadiusnumber4十字线标记半径(以像素为单位)
lineTypeLineTypeLineType.Simple线条类型

例子

  • 设置线系列的初始选项:
  1. const lineSeries = chart.addLineSeries({
  2. color: "#f48fb1",
  3. lineStyle: 0,
  4. lineWidth: 1,
  5. crosshairMarkerVisible: true,
  6. crosshairMarkerRadius: 6,
  7. lineType: 1
  8. });
  • 创建系列后更改选项:
  1. // 例如,让我们仅覆盖线宽和颜色
  2. lineSeries.applyOptions({
  3. color: "rgba(255, 44, 128, 1)",
  4. lineWidth: 3
  5. });

下一步是什么