拼ui 一些业务逻辑x实现

2026-03-19 06:15:09 +08:00
parent f5c6f143c0
commit 49e45ac464
1118 changed files with 246518 additions and 5368 deletions
@@ -0,0 +1,111 @@
+# Line Chart (Line)
+
+This chapter explains the key points of configuring a Line chart in EasyChart: how to set it up, how data is interpreted, and which fields affect rendering.
+
+---
+
+## 1. Use cases
+
+- Trend changes (time series / category-based)
+- Comparing multiple curves (same X dimension)
+- Line styles such as smooth / step / straight
+
+---
+
+## 2. Minimum viable setup (checklist)
+
+1. `ChartProfile.coordinateSystem = Cartesian2D`
+2. Axes (Axis Settings)
+   - X: usually **Category** (fill `labels`) or **Value** (numeric X axis)
+   - Y: usually **Value**
+3. Series (Series panel)
+   - Add 1 `Serie`
+   - `Serie.type = Line`
+   - `Serie.seriesData` has at least 2 points (a line needs at least two points)
+
+---
+
+## 3. Inspector fields (what you see in panels)
+
+- **ChartProfile / Coordinate System**
+  - `coordinateSystem`
+
+- **Axis Settings** (depends on coordinate system)
+  - Cartesian: `cartesian.xAxisId / cartesian.yAxisId`
+  - Axis list: `axes[]` (each Axis has `axisType/labels/min/max/autoRange/...`)
+
+- **Series** (each curve)
+  - `series[i].type = Line`
+  - `series[i].settings`: actual type is `LineSettings`
+    - `stroke`: line stroke (type/color/width/texture, etc.)
+    - `point`: point marker style (toggle/size/texture, etc.)
+    - `hover`: hover emphasis (enables pick radius / highlight)
+    - `area`: area fill (fill under the line)
+  - `series[i].labelSettings`: point labels (visibility/format/decimals/offset, etc.)
+
+---
+
+## 4. SeriesData field interpretation (runtime behavior)
+
+Line chart uses:
+
+- **X coordinate**: `SeriesData.x`
+- **Y value**: `SeriesData.value`
+- `SeriesData.y` is **not used for rendering** in line charts (do not treat `y` as the Y value).
+
+Two common patterns:
+
+### 4.1 Category X + Value Y (most common)
+
+- X axis: `AxisType.Category`
+- `AxisConfig.labels = ["A","B","C",...]`
+- Data points:
+  - `x = category index` (0/1/2..., mapped into labels)
+  - `value = numeric value`
+
+### 4.2 Value X + Value Y (numeric X axis)
+
+- X axis: `AxisType.Value`
+- Data points:
+  - `x = X value`
+  - `value = Y value`
+
+> Additional note: when your axis dimensions are **X=Value, Y=Category**, runtime treats it as a transposed Cartesian layout (`transposed`) and swaps how X/Y are interpreted during rendering (useful for horizontal layouts).
+
+---
+
+## 5. Common style settings (LineSettings)
+
+- **Line type**: `LineSettings.stroke.lineType`
+  - `Straight`: straight lines
+  - `Step`: step line
+  - `Smooth`: smooth curve
+
+- **Stroke width/color**: `LineSettings.stroke.width` / `LineSettings.stroke.color`
+
+- **Point markers**: `LineSettings.point.show/size/textureFill`
+
+- **Area fill**: `LineSettings.area.show` + `LineSettings.area.textureFill`
+
+---
+
+## 6. Common pitfalls and troubleshooting (by symptoms)
+
+- **Line breaks / not visible**
+  - Check whether `SeriesData.value` contains `NaN/Infinity`
+  - A line needs at least 2 valid points
+
+- **Points do not align with labels (Category X)**
+  - Check that `x` is an index within 0..(labels.Count-1)
+  - Do not write `x` as a category string (EasyChart uses index, not string)
+
+- **I filled `y`, but the chart is wrong**
+  - Line chart uses `value` as the Y value, not `y`
+
+---
+
+## 7. Further reading
+
+- Axes/range, Series and data: `00_02-WorkflowAndLibrary.md`
+- Common recipes: `04_08-CommonRecipes.md`
+- FAQ: `04_09-FAQ.md`