图表
LineChart
连续轴上互相比较的多条序列。
什么时候用它
读者在把序列互相比较。当某条线下方的面积才是重点时，就把它填起来——那是 AreaChart。
示例
default
| month | Desktop | Mobile |
|---|---|---|
| Jan | 186 | 80 |
| Feb | 305 | 200 |
| Mar | 237 | 120 |
| Apr | 273 | 190 |
| May | 209 | 130 |
| Jun | 314 | 240 |
stroke dot curve
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
legend variants
| Desktop | Mobile |
|---|---|
| 186 | 80 |
| 305 | 200 |
| 237 | 120 |
| 273 | 190 |
backgrounds
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
emphasis
| Desktop | Mobile |
|---|---|
| 186 | 80 |
| 305 | 200 |
| 237 | 120 |
| 273 | 190 |
| 209 | 130 |
| 314 | 240 |
| Desktop | Mobile |
|---|---|
| 186 | 80 |
| 305 | 200 |
| 237 | 120 |
| 273 | 190 |
| 209 | 130 |
| 314 | 240 |
brush
| day | Desktop | Mobile |
|---|---|---|
| D1 | 160 | 140 |
| D2 | 177 | 139 |
| D3 | 194 | 136 |
| D4 | 208 | 131 |
| D5 | 219 | 125 |
| D6 | 226 | 117 |
| D7 | 230 | 108 |
| D8 | 229 | 98 |
| D9 | 224 | 89 |
| D10 | 214 | 79 |
| D11 | 202 | 69 |
| D12 | 187 | 61 |
| D13 | 170 | 53 |
| D14 | 152 | 47 |
| D15 | 135 | 43 |
| D16 | 120 | 41 |
| D17 | 107 | 40 |
| D18 | 97 | 42 |
| D19 | 92 | 45 |
| D20 | 90 | 50 |
| D21 | 93 | 57 |
| D22 | 100 | 65 |
| D23 | 111 | 75 |
| D24 | 124 | 84 |
| D25 | 140 | 94 |
| D26 | 158 | 104 |
| D27 | 175 | 113 |
| D28 | 192 | 122 |
| D29 | 206 | 129 |
| D30 | 218 | 134 |
| D31 | 226 | 138 |
| D32 | 230 | 140 |
| D33 | 229 | 140 |
| D34 | 225 | 138 |
| D35 | 216 | 133 |
| D36 | 204 | 128 |
| D37 | 189 | 120 |
| D38 | 172 | 112 |
| D39 | 155 | 103 |
| D40 | 138 | 93 |
loading
axis labels and format
| p95 latency |
|---|
| 1.42 |
| 1.61 |
| 2.04 |
| 1.88 |
| 1.34 |
| Ad spend |
|---|
| 4,210 |
| 5,180 |
| 4,890 |
| 6,320 |
| 7,010 |
sonify
| week | p95 latency | p50 latency |
|---|---|---|
| W1 | 142 | 61 |
| W2 | 161 | 64 |
| W3 | 204 | 66 |
| W4 | 188 | 63 |
| W5 | 134 | 58 |
| W6 | 129 | 57 |
toolbar
Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer, and dragging across the plot zooms to that span.
Showing D1 to D90, 90 of 90 points
| day | Desktop | Mobile |
|---|---|---|
| D1 | 160 | 140 |
| D2 | 172 | 140 |
| D3 | 183 | 139 |
| D4 | 194 | 137 |
| D5 | 203 | 135 |
| D6 | 212 | 132 |
| D7 | 219 | 129 |
| D8 | 224 | 126 |
| D9 | 228 | 122 |
| D10 | 230 | 117 |
| D11 | 230 | 112 |
| D12 | 228 | 107 |
| D13 | 224 | 102 |
| D14 | 218 | 96 |
| D15 | 211 | 91 |
| D16 | 202 | 85 |
| D17 | 192 | 80 |
| D18 | 181 | 74 |
| D19 | 170 | 69 |
| D20 | 158 | 64 |
| D21 | 147 | 60 |
| D22 | 135 | 55 |
| D23 | 125 | 52 |
| D24 | 115 | 48 |
| D25 | 107 | 46 |
| D26 | 100 | 43 |
| D27 | 95 | 42 |
| D28 | 92 | 41 |
| D29 | 90 | 40 |
| D30 | 91 | 40 |
| D31 | 93 | 41 |
| D32 | 97 | 42 |
| D33 | 103 | 44 |
| D34 | 111 | 47 |
| D35 | 120 | 50 |
| D36 | 130 | 53 |
| D37 | 140 | 57 |
| D38 | 152 | 62 |
| D39 | 164 | 66 |
| D40 | 175 | 71 |
| D41 | 186 | 77 |
| D42 | 197 | 82 |
| D43 | 206 | 88 |
| D44 | 214 | 93 |
| D45 | 221 | 99 |
| D46 | 226 | 104 |
| D47 | 229 | 109 |
| D48 | 230 | 114 |
| D49 | 229 | 119 |
| D50 | 227 | 123 |
| D51 | 222 | 127 |
| D52 | 216 | 131 |
| D53 | 208 | 134 |
| D54 | 199 | 136 |
| D55 | 189 | 138 |
| D56 | 178 | 139 |
| D57 | 166 | 140 |
| D58 | 155 | 140 |
| D59 | 143 | 139 |
| D60 | 132 | 138 |
| D61 | 122 | 136 |
| D62 | 113 | 134 |
| D63 | 105 | 131 |
| D64 | 98 | 128 |
| D65 | 94 | 124 |
| D66 | 91 | 120 |
| D67 | 90 | 115 |
| D68 | 91 | 110 |
| D69 | 94 | 105 |
| D70 | 99 | 99 |
| D71 | 105 | 94 |
| D72 | 113 | 88 |
| D73 | 122 | 83 |
| D74 | 133 | 77 |
| D75 | 144 | 72 |
| D76 | 155 | 67 |
| D77 | 167 | 62 |
| D78 | 178 | 58 |
| D79 | 189 | 54 |
| D80 | 200 | 50 |
| D81 | 209 | 47 |
| D82 | 216 | 44 |
| D83 | 222 | 42 |
| D84 | 227 | 41 |
| D85 | 229 | 40 |
| D86 | 230 | 40 |
| D87 | 229 | 40 |
| D88 | 225 | 41 |
| D89 | 220 | 43 |
| D90 | 214 | 45 |
说明
连续轴上互相比较的多条序列——用来回答“这几条各自在往哪走”。
和 <AreaChart> 的区别在于它要求读者做什么：区域图说“读这下面的量”，折线图说“把这几条互相比一比”。把四条互相重叠的序列都填上，第二个问题就没法回答了——这也是折线图不提供填充样式的原因。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。 | |
| config必填 | TConfig & ValidateKeys<TData, TConfig> | — | |
| data必填 | TData[] | 图表要画的数据行。每一条对应一个点、一根柱或一个分类。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| animationType | ChartRevealType | 'forward' | — |
| chartProps | ComponentProps<typeof RechartsLineChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| curveType | ChartCurveType | 'linear' | 两个点之间的线怎么插值。除非某个标记自己另有说明，否则都继承它。 |
| defaultSelectedDataKey | string | null | null | 首次渲染时点亮的序列。选中会让其他序列变暗。 |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| empty | ChartEmptyProps | false | 图表没东西可画时显示什么。 只要 `data` 是空的、而且图表并不处于加载中，它就会顶替绘图区渲染出来——这是任何一个真实仪表盘一周之内就会遇到的状态，也是「空白的一对坐标轴」和「加载失败」根本分不出来的那一个。传 `false` 保留坐标轴，用于那种「空本身就是结论」的图。 | |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| isLoading | boolean | false | 把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。 |
| loadingPoints | number | 骨架画多少个点。 | |
| onSelectionChange | (selectedDataKey: string | null) => void | 选中项变化时触发；被清除时传 null。 | |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| xDataKey | keyof TData & string | 分类轴对应的数据字段。brush 和表格视图都需要它。 |
类型
export type LineStrokeVariant = AreaStrokeVariant无障碍
- title 必填；数据行同样会渲染成一份视觉隐藏的表格。
- 可点击的线下面会垫一条 15px 的透明线，因为 1.6px 的描边不构成指针目标。
- buffer 通过测量真实路径长度把最后一段画成虚线，所以在任何曲线类型下，“预测”都明确是另一种性质的事实。