图表（Chart）：运行时、Chart.js 绘制、设计器的"系列和图例"

- System.Windows.Forms.DataVisualization.Charting：ChartAreas、Legends、Titles、Series
  （ChartType、Points.AddXY、图例文字等），DataSource + DataBind（DataTable / DataView / DataSet，
  按 XValueMember、YValueMembers 取列）；数据变化时把各系列的点发给浏览器
- 浏览器用 Chart.js 画：SeriesChartType 对应折线、柱形、饼图等，WinForms 默认的 BrightPastel 配色，不要动画
- 设计器工具箱加"图表"，和 VS 一样带 ChartArea1、Legend1、Series1；属性窗口"系列和图例"对话框
  编辑系列（名称、图表类型、图例、图例文字、X / Y 值字段）和图例，按 VS 的格式和顺序写回 Designer.cs，
  对话框不管的属性原样保留，教材项目 8 的图表读入再写出逐字节不变；删除图表时一起删掉局部变量；
  设计时用示例数据预览

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/designer/preview.ts

@@ -2,6 +2,7 @@
 // 保证设计时看到的样子和运行时一致。
 import type { ControlNode } from '@iot/shared'
 import { controlDef } from './catalog'
+import { CHART_TYPE, previewChart, readChart } from './chart'
 import type { DesignerDocument } from './document'
 import { childrenOf, findBlock, getItems, listControls } from './edit'
 import { resourceNameOf, resourceUrl } from './resources'
@@ -13,6 +14,7 @@ export const FORM_ID = '__form'
 /** 运行时控件树里的类型名：System.Windows.Forms.Button → Button，教材控件库保留完整类名 */
 function clientType(type: string) {
   if (type === 'AxWMPLib.AxWindowsMediaPlayer') return 'AxWindowsMediaPlayer'
+  if (type === 'System.Windows.Forms.DataVisualization.Charting.Chart') return 'Chart'
   return type.startsWith('System.Windows.Forms.') ? type.slice('System.Windows.Forms.'.length) : type
 }
 
@@ -77,6 +79,8 @@ export function previewTree(doc: DesignerDocument): ControlNode {
     })
     // 设计器里不需要滚动：LED 只显示黑底
     if (type === 'WinFormsDeviceControlLibrary.LED') props.LedText = ''
+    // 图表和 VS 一样用示例数据画出各个系列
+    if (type === CHART_TYPE) props.Chart = previewChart(readChart(doc, name))
     // 和 VS 一样显示今天的日期
     if (type === 'System.Windows.Forms.DateTimePicker') props.Text = previewDate(String(props.Format ?? 'Long'))
     return { id: name, type: clientType(type), name, props, children: childrenOf(doc, name).filter((c) => types.has(c)).map(build) }