001 add timeline chart

.cursor/rules/specify-rules.mdc

@@ -3,6 +3,7 @@
 Auto-generated from all feature plans. Last updated: 2026-01-15
 
 ## Active Technologies
+
 - TypeScript/React 18 + @visactor/react-vchart, @visactor/vchar (001-react-vchart-demo)
 
 - TypeScript 4.9.5 + @visactor/vchart, @visactor/vrender-components (~1.0.37), @visactor/vutils (001-scrollbar-wheel-step)
@@ -23,6 +24,7 @@ npm test && npm run lint
 TypeScript 4.9.5: Follow standard conventions
 
 ## Recent Changes
+
 - 001-react-vchart-demo: Added TypeScript/React 18 + @visactor/react-vchart, @visactor/vchar
 - 001-react-vchart-demo: Added [if applicable, e.g., PostgreSQL, CoreData, files or N/A]
 

docs/assets/examples/en/extension-chart/timeline-arrow.md

@@ -0,0 +1,146 @@
+---
+category: examples
+group: extension chart
+title: Timeline Chart - With Arrows
+keywords: extension, timeline, arrow
+order: 5
+cover: /vchart/preview/timeline-arrow_2.0.jpeg
+option: extensionChart
+---
+
+# Timeline Chart - With Arrows
+
+Timeline charts support displaying arrows between event nodes, providing a more intuitive representation of time flow and continuity between events.
+
+## Key Configurations
+
+- `arrow.visible: true` Enable arrow display
+- `arrow.thickness` Set the thickness of arrows
+- `arrow.style` Configure arrow style
+
+## Demo Code
+
+```javascript livedemo
+/** --Please add the following code when using in business-- */
+// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart
+// import { registerTimelineChart } from '@visactor/vchart-extension';
+/** --Please add the above code when using in business-- */
+
+/** --Please delete the following code when using in business-- */
+const { registerTimelineChart } = VChartExtension;
+/** --Please delete the above code when using in business-- */
+
+const spec = {
+  type: 'timeline',
+  direction: 'horizontal',
+  data: [
+    {
+      id: 'timeline-data',
+      values: [
+        {
+          id: '1',
+          title: 'Requirements',
+          detail: 'Collect and analyze user needs',
+          time: 1,
+          color: '#4A90E2'
+        },
+        {
+          id: '2',
+          title: 'Design',
+          detail: 'Create technical solution',
+          time: 2,
+          color: '#50C8C8'
+        },
+        {
+          id: '3',
+          title: 'Development',
+          detail: 'Implement features',
+          time: 3,
+          color: '#F5A623'
+        },
+        {
+          id: '4',
+          title: 'Testing',
+          detail: 'Quality assurance',
+          time: 4,
+          color: '#9B59B6'
+        },
+        {
+          id: '5',
+          title: 'Release',
+          detail: 'Go live',
+          time: 5,
+          color: '#2ECC71'
+        }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Project Development Process',
+    subtext: 'Complete workflow from requirements to release',
+    style: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      fill: '#333'
+    },
+    subtextStyle: {
+      fontSize: 14,
+      fill: '#666'
+    }
+  },
+  series: [
+    {
+      type: 'event',
+      dataId: 'timeline-data',
+      timeField: 'time',
+      eventField: 'title',
+      subTitleField: 'detail',
+      labelPosition: 'top-bottom',
+      dot: {
+        style: {
+          size: 12,
+          fill: datum => datum.color,
+          stroke: '#fff',
+          lineWidth: 2
+        }
+      },
+      arrow: {
+        visible: true,
+        thickness: 16,
+        style: {
+          fill: datum => datum.color,
+          fillOpacity: 0.3
+        }
+      },
+      title: {
+        style: {
+          fill: '#333',
+          fontSize: 14,
+          fontWeight: 'bold'
+        }
+      },
+      subTitle: {
+        style: {
+          fill: '#666',
+          fontSize: 12
+        }
+      },
+      line: {
+        visible: false
+      }
+    }
+  ]
+};
+
+registerTimelineChart();
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related Tutorials
+
+[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline)

docs/assets/examples/en/extension-chart/timeline-basic.md

@@ -0,0 +1,141 @@
+---
+category: examples
+group: extension chart
+title: Timeline Chart - Basic
+keywords: extension, timeline
+order: 1
+cover: /vchart/preview/timeline-basic_2.0.jpeg
+option: extensionChart
+---
+
+# Timeline Chart - Basic
+
+Timeline charts are used to display events in chronological order, suitable for project milestones, corporate development history, product iterations, and other scenarios.
+
+## Key Configurations
+
+- `type: 'timeline'` Specifies the chart type as timeline chart
+- `direction: 'horizontal' | 'vertical'` Specifies the direction of the timeline, horizontal or vertical
+- `timeField` Specifies the time field
+- `eventField` Specifies the event name field
+- `subTitleField` Specifies the event detail field
+
+## Demo Code
+
+```javascript livedemo
+/** --Please add the following code when using in business-- */
+// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart
+// import { registerTimelineChart } from '@visactor/vchart-extension';
+/** --Please add the above code when using in business-- */
+
+/** --Please delete the following code when using in business-- */
+const { registerTimelineChart } = VChartExtension;
+/** --Please delete the above code when using in business-- */
+
+const spec = {
+  type: 'timeline',
+  direction: 'horizontal',
+  padding: {
+    left: 60,
+    right: 60,
+    top: 150,
+    bottom: 150
+  },
+  data: [
+    {
+      id: 'timeline-data',
+      values: [
+        {
+          id: '1',
+          year: '2021',
+          title: 'Product Launch',
+          detail: 'Released first generation product with market recognition',
+          time: 1,
+          color: '#4A90E2'
+        },
+        {
+          id: '2',
+          year: '2022',
+          title: 'Tech Breakthrough',
+          detail: 'Achieved major breakthrough in core technology',
+          time: 2,
+          color: '#50C8C8'
+        },
+        {
+          id: '3',
+          year: '2023',
+          title: 'Market Expansion',
+          detail: 'Business coverage extended to major cities nationwide',
+          time: 3,
+          color: '#F5A623'
+        },
+        {
+          id: '4',
+          year: '2024',
+          title: 'Globalization',
+          detail: 'Entered international market, opening new chapter',
+          time: 4,
+          color: '#9B59B6'
+        }
+      ]
+    }
+  ],
+  title: {
+    visible: true,
+    text: 'Corporate Development History',
+    style: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      fill: '#333'
+    }
+  },
+  series: [
+    {
+      type: 'event',
+      dataId: 'timeline-data',
+      timeField: 'time',
+      eventField: 'title',
+      subTitleField: 'detail',
+      labelPosition: 'top-bottom',
+      dot: {
+        style: {
+          size: 12,
+          fill: datum => datum.color,
+          stroke: '#fff',
+          lineWidth: 2
+        }
+      },
+      title: {
+        style: {
+          fill: '#333',
+          fontSize: 14,
+          fontWeight: 'bold'
+        }
+      },
+      subTitle: {
+        style: {
+          fill: '#666',
+          fontSize: 12
+        }
+      },
+      line: {
+        style: {
+          stroke: '#c0c3c7',
+          lineWidth: 2
+        }
+      }
+    }
+  ]
+};
+
+registerTimelineChart();
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related Tutorials
+
+[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline)