add candlestick chart in vchart-extension

docs/assets/examples/menu.json

@@ -2001,6 +2001,36 @@
         }
       ]
     },
+    {
+      "path": "candlestick-chart",
+      "title": {
+        "zh": "k线图",
+        "en": "candlestick-chart"
+      },
+      "children": [
+        {
+          "path": "candlestick-basic",
+          "title": {
+            "zh": "基础K线图",
+            "en": "Basic Candlestick Chart"
+          }
+        },
+        {
+          "path": "candlestick-with-volume",
+          "title": {
+            "zh": "K线图与成交量",
+            "en": "Candlestick Chart with Volume"
+          }
+        },
+        {
+          "path": "candlestick-with-MA",
+          "title": {
+            "zh": "K线图与日均线",
+            "en": "Candlestick Chart with MA"
+          }
+        }
+      ]
+    },
     {
       "path": "chart-3d",
       "title": {

docs/assets/examples/zh/candlestick-chart/candlestick-basic.md

@@ -0,0 +1,54 @@
+---
+category: examples
+group: candlestick chart
+title: 基础k线图
+keywords: candlestick
+order: 19-0
+option: candlestickChart
+---
+
+# K 线图
+
+K 线图基本用法
+
+## 关键配置
+
+## 代码演示
+
+```javascript livedemo
+if (VChartExtension.registerCandlestickChart) {
+  VChartExtension.registerCandlestickChart();
+}
+
+const data = [
+  { time: '2024-07-01', open: 100, close: 130, high: 135, low: 90 },
+  { time: '2024-07-02', open: 130, close: 80, high: 140, low: 75 },
+  { time: '2024-07-03', open: 80, close: 150, high: 155, low: 70 },
+  { time: '2024-07-04', open: 150, close: 140, high: 160, low: 105 },
+  { time: '2024-07-05', open: 140, close: 170, high: 180, low: 115 },
+  { time: '2024-07-06', open: 170, close: 170, high: 175, low: 95 },
+  { time: '2024-07-07', open: 170, close: 100, high: 175, low: 95 },
+  { time: '2024-07-08', open: 100, close: 160, high: 210, low: 90 }
+];
+
+const spec = {
+  type: 'candlestick',
+  xField: 'time',
+  openField: 'open',
+  closeField: 'close',
+  highField: 'high',
+  lowField: 'low',
+  data: [
+    {
+      values: data
+    }
+  ]
+};
+
+const vchart = new VChart(spec, {
+  dom: CONTAINER_ID
+});
+vchart.renderSync();
+
+window['vchart'] = vchart;
+```

docs/assets/examples/zh/candlestick-chart/candlestick-with-MA.md

@@ -0,0 +1,108 @@
+---
+category: examples
+group: candlestick chart
+title: k线图组合显示
+keywords: candlestick MA
+order: 19-0
+option: candlestickChart
+---
+
+# K 线图与均线组合
+
+K 线图基本用法
+
+## 关键配置
+
+- `type: 'candlestick'`
+- `xField`, `openField`, `closeField`, `highField`, `lowField`
+- `data`
+
+## 代码演示
+
+```javascript livedemo
+if (VChartExtension.registerCandlestickChart) {
+  VChartExtension.registerCandlestickChart();
+}
+
+const data = [
+  { time: '2024-07-01', open: 100, close: 130, high: 135, low: 90 },
+  { time: '2024-07-02', open: 130, close: 80, high: 140, low: 75 },
+  { time: '2024-07-03', open: 80, close: 150, high: 155, low: 70 },
+  { time: '2024-07-04', open: 150, close: 140, high: 160, low: 105 },
+  { time: '2024-07-05', open: 140, close: 170, high: 180, low: 115 },
+  { time: '2024-07-06', open: 170, close: 170, high: 175, low: 95 },
+  { time: '2024-07-07', open: 170, close: 100, high: 175, low: 95 },
+  { time: '2024-07-08', open: 100, close: 160, high: 210, low: 90 },
+  { time: '2024-07-09', open: 160, close: 180, high: 200, low: 150 },
+  { time: '2024-07-10', open: 180, close: 175, high: 190, low: 160 },
+  { time: '2024-07-11', open: 175, close: 190, high: 195, low: 170 },
+  { time: '2024-07-12', open: 190, close: 210, high: 220, low: 185 },
+  { time: '2024-07-13', open: 210, close: 200, high: 215, low: 195 },
+  { time: '2024-07-14', open: 200, close: 220, high: 225, low: 198 },
+  { time: '2024-07-15', open: 220, close: 230, high: 240, low: 215 }
+];
+
+function calcMA(data, window) {
+  const result = [];
+  for (let i = 0; i < data.length; i++) {
+    if (i < window - 1) {
+      result.push({ time: data[i].time, ma: null });
+    } else {
+      let sum = 0;
+      for (let j = 0; j < window; j++) {
+        sum += data[i - j].close;
+      }
+      result.push({ time: data[i].time, ma: sum / window });
+    }
+  }
+  return result;
+}
+
+const spec = {
+  type: 'common',
+  data: [
+    { id: 'k', values: data },
+    { id: 'ma5', values: calcMA(data, 5) }
+  ],
+  series: [
+    {
+      id: 'candlestick',
+      type: 'candlestick',
+      dataIndex: 0,
+      xField: 'time',
+      yField: ['open', 'close', 'high', 'low'],
+      openField: 'open',
+      closeField: 'close',
+      highField: 'high',
+      lowField: 'low'
+    },
+    {
+      type: 'line',
+      id: 'line',
+      dataIndex: 1,
+      xField: 'time',
+      yField: 'ma',
+      line: {
+        style: {
+          stroke: 'rgb(229, 193, 160)',
+          lineWidth: 2
+        }
+      },
+      point: {
+        visible: false
+      }
+    }
+  ],
+  axes: [
+    { orient: 'left', seriesIndex: [0, 1] },
+    { orient: 'bottom', label: { visible: true }, type: 'band' }
+  ]
+};
+
+const vchart = new VChart(spec, {
+  dom: CONTAINER_ID
+});
+vchart.renderSync();
+
+window['vchart'] = vchart;
+```

docs/assets/examples/zh/candlestick-chart/candlestick-with-volume.md

@@ -0,0 +1,123 @@
+---
+category: examples
+group: candlestick chart
+title: 基础k线图
+keywords: candlestick
+order: 19-0
+option: candlestickChart
+---
+
+# K 线图
+
+K 线图基本用法
+
+## 关键配置
+
+- `type: 'candlestick'`
+- `xField`, `openField`, `closeField`, `highField`, `lowField`
+- `data`
+
+## 代码演示
+
+```javascript livedemo
+if (VChartExtension.registerCandlestickChart) {
+  VChartExtension.registerCandlestickChart();
+}
+
+const data = [
+  { time: '2024-07-01', open: 100, close: 130, high: 135, low: 90, volume: 5000 },
+  { time: '2024-07-02', open: 130, close: 80, high: 140, low: 75, volume: 8000 },
+  { time: '2024-07-03', open: 80, close: 150, high: 155, low: 70, volume: 6000 },
+  { time: '2024-07-04', open: 150, close: 140, high: 160, low: 105, volume: 7000 },
+  { time: '2024-07-05', open: 140, close: 170, high: 180, low: 115, volume: 9000 },
+  { time: '2024-07-06', open: 170, close: 170, high: 175, low: 95, volume: 4000 },
+  { time: '2024-07-07', open: 170, close: 100, high: 175, low: 95, volume: 10000 },
+  { time: '2024-07-08', open: 100, close: 160, high: 210, low: 90, volume: 11000 },
+  { time: '2024-07-09', open: 160, close: 180, high: 200, low: 150, volume: 9500 },
+  { time: '2024-07-10', open: 180, close: 170, high: 185, low: 160, volume: 8700 },
+  { time: '2024-07-11', open: 170, close: 200, high: 210, low: 165, volume: 12000 },
+  { time: '2024-07-12', open: 200, close: 210, high: 220, low: 190, volume: 10500 },
+  { time: '2024-07-13', open: 210, close: 190, high: 215, low: 180, volume: 9800 },
+  { time: '2024-07-14', open: 190, close: 195, high: 200, low: 185, volume: 7600 },
+  { time: '2024-07-15', open: 195, close: 220, high: 225, low: 190, volume: 13000 },
+  { time: '2024-07-16', open: 220, close: 210, high: 230, low: 205, volume: 9000 }
+];
+
+const spec = {
+  type: 'common',
+  data: [{ values: data }],
+  layout: {
+    type: 'grid',
+    col: 2,
+    row: 3,
+    elements: [
+      { modelId: 'region-k', col: 1, row: 0 },
+      { modelId: 'region-volume', col: 1, row: 2 },
+      { modelId: 'axis-x', col: 1, row: 1 },
+      { modelId: 'axis-y-k', col: 0, row: 0 },
+      { modelId: 'axis-y-volume', col: 0, row: 2 }
+    ]
+  },
+  region: [{ id: 'region-k', height: 0.7 }, { id: 'region-volume' }],
+  padding: {
+    top: 10
+  },
+  series: [
+    {
+      regionId: 'region-k',
+      type: 'candlestick',
+      xField: 'time',
+      yField: ['open', 'close', 'high', 'low'],
+      openField: 'open',
+      closeField: 'close',
+      highField: 'high',
+      lowField: 'low',
+      data: { values: data }
+    },
+    {
+      regionId: 'region-volume',
+      type: 'bar',
+      xField: 'time',
+      yField: 'volume',
+      data: { values: data },
+      bar: {
+        style: {
+          fill: (datum: Datum) => {
+            if (datum.open < datum.close) {
+              return '#FF0000';
+            } else if (datum.open > datum.close) {
+              return '#00AA00';
+            } else {
+              return '#000000';
+            }
+          }
+        }
+      }
+    }
+  ],
+  axes: [
+    {
+      id: 'axis-y-k',
+      regionId: 'region-k',
+      orient: 'left'
+    },
+    {
+      id: 'axis-y-volume',
+      regionId: 'region-volume',
+      orient: 'left'
+    },
+    {
+      id: 'axis-x',
+      regionId: ['region-volume', 'region-k'],
+      orient: 'bottom'
+    }
+  ]
+};
+
+const vchart = new VChart(spec, {
+  dom: CONTAINER_ID
+});
+vchart.renderSync();
+
+window['vchart'] = vchart;
+```

packages/vchart-extension/__tests__/runtime/browser/test-page/candlestick.ts

@@ -0,0 +1,44 @@
+import { ICandlestickChartSpec } from '../../../../src/charts/candlestick/interface';
+import { registerCandlestickChart } from '../../../../src/charts/candlestick/candlestick';
+import VChart from '@visactor/vchart';
+
+const data = [
+  { time: '2024-07-01', open: 100, close: 130, high: 135, low: 90 },
+  { time: '2024-07-02', open: 130, close: 80, high: 140, low: 75 },
+  { time: '2024-07-03', open: 80, close: 150, high: 155, low: 70 },
+  { time: '2024-07-04', open: 150, close: 140, high: 160, low: 105 },
+  { time: '2024-07-05', open: 140, close: 170, high: 180, low: 115 },
+  { time: '2024-07-06', open: 170, close: 170, high: 175, low: 95 },
+  { time: '2024-07-07', open: 170, close: 100, high: 175, low: 95 },
+  { time: '2024-07-08', open: 100, close: 160, high: 210, low: 90 }
+];
+
+const spec: ICandlestickChartSpec = {
+  type: 'candlestick',
+  xField: 'time',
+  openField: 'open',
+  closeField: 'close',
+  highField: 'high',
+  lowField: 'low',
+  data: [
+    {
+      values: data
+    }
+  ]
+};
+
+const run = () => {
+  registerCandlestickChart();
+  const cs = new VChart(spec, {
+    dom: document.getElementById('chart') as HTMLElement,
+    onError: err => {
+      console.error(err);
+    }
+  });
+  console.time('renderTime');
+  cs.renderSync();
+  console.timeEnd('renderTime');
+  window['vchart'] = cs;
+  console.log(cs);
+};
+run();