折线图(Line)
本章目标:把“折线图在 EasyChart 里到底怎么配置、数据怎么解释、哪些字段会影响渲染”的关键点一次讲清楚。
1. 适用场景
- 趋势变化(时间序列/按类目变化)
- 多条曲线对比(同一套 X 维度)
- 需要平滑/阶梯/直线等线型表达
2. 最小可用配置(Checklist)
ChartProfile.coordinateSystem = Cartesian2D- 轴(Axis Settings)
- X:通常用 Category(填写
labels)或 Value(数值横轴) - Y:通常用 Value
- X:通常用 Category(填写
- Series(Series 面板)
- 添加 1 条
Serie Serie.type = LineSerie.seriesData至少 2 个点(折线需要至少两点才能连线)
- 添加 1 条
3. Inspector 对应字段(你在面板里看到的是什么)
-
ChartProfile / Coordinate System
coordinateSystem
-
Axis Settings(与坐标系相关)
- Cartesian:
cartesian.xAxisId / cartesian.yAxisId - 轴列表:
axes[](每个 Axis 的axisType/labels/min/max/autoRange/...)
- Cartesian:
-
Series(每条曲线)
series[i].type = Lineseries[i].settings:实际类型为LineSettingsstroke:线条(线型/颜色/宽度/纹理等)point:点样式(开关/大小/纹理等)hover:悬停强调(开启后才会有“拾取半径/高亮”)area:面积填充(折线下方填充)
series[i].labelSettings:数据点标签(是否显示、格式、小数位、偏移等)
4. SeriesData 字段解释(最关键,按运行时代码)
折线图渲染时使用:
- X 坐标:
SeriesData.x - Y 数值:
SeriesData.value SeriesData.y在折线图中 不参与渲染(不要把 y 当作折线的纵值)。
两种常见写法:
4.1 Category X + Value Y(最常用)
- X 轴设为
AxisType.Category AxisConfig.labels = ["A","B","C",...]- 数据点:
x = 类目索引(0/1/2…,会按索引映射到 labels)value = 数值
4.2 Value X + Value Y(数值横轴)
- X 轴设为
AxisType.Value - 数据点:
x = 横轴数值value = 纵轴数值
额外说明:当你的轴维度是 X=Value, Y=Category 时,运行时会认为是“笛卡尔坐标转置”(transposed),会在渲染时交换 X/Y 的解释方式(用于横向布局的场景)。
5. 常用样式配置(LineSettings)
-
线型:
LineSettings.stroke.lineTypeStraight:直线Step:阶梯线Smooth:平滑曲线
-
线条粗细/颜色:
LineSettings.stroke.width/LineSettings.stroke.color -
点标记:
LineSettings.point.show/size/textureFill -
面积填充:
LineSettings.area.show+LineSettings.area.textureFill
6. 常见坑与排错(按现象)
-
线断裂 / 不显示
- 检查
SeriesData.value是否出现NaN/Infinity - 折线至少 2 个有效点
- 检查
-
点不在标签上(Category X)
- 检查
x是否为 0..(labels.Count-1) 的索引 - 检查是否误把
x写成了“类目字符串”(EasyChart 这里是索引,不是字符串)
- 检查
-
我填了 y,但图不对
- 折线图纵值用的是
value,不是y
- 折线图纵值用的是
7. 深入参考
- 轴与范围、Series 与数据:
00-WorkflowAndLibrary.md - 常用配方:
05-CommonRecipes.md - FAQ:
06-FAQ.md