docs: add simple candlestick demos #6265

1379255913 · 2024-06-03T15:12:33Z

Checklist

close #5905

npm test passes
benchmarks are included
commit message follows commit guidelines
documents are updated

1379255913 · 2024-06-03T15:13:54Z

pearmini

案例写的很工整！有一个小问题可以注意一下 🤣

site/examples/general/candlestick/demo/basis.ts

site/examples/general/candlestick/demo/k-and-area.ts

site/examples/general/candlestick/demo/k-and-column.ts

coveralls · 2024-06-04T02:37:18Z

Pull Request Test Coverage Report for Build 9379527619

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

For more information on this, see Tracking coverage changes with pull request builds.
To avoid this issue with future PRs, see these Recommended CI Configurations.
For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

0 of 0 changed or added relevant lines in 0 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 86.412%

Totals
Change from base Build 9317051310:	0.0%
Covered Lines:	10375
Relevant Lines:	11630

💛 - Coveralls

1379255913 · 2024-06-04T22:32:35Z

使用.encode("x", (d) => new Date(d.time))后似乎并不会自动排序，效果图如下

以下是配置项

const data = ...

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .data(data)
  .encode("x", (d) => new Date(d.time)) // 转换成 Date 对象就可以自动排序了
  .encode("color", (d) => { // 通过 encode 生成一个新的 column 就行了
    const trend = Math.sign(d.start - d.end);
    return trend > 0 ? "下跌" : trend === 0 ? "不变" : "上涨";
  })
  .scale('color', {
    domain: ['下跌', '不变', '上涨'],
    range: ['#4daf4a', '#999999', '#e41a1c'],
  });

chart
  .link()
  .encode("x", "time")
  .encode('y', ['min', 'max'])
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  });

chart
  .interval()
  .encode("x", "time")
  .encode('y', ['start', 'end'])
  .style('fillOpacity', 1)
  .style('stroke', (d) => {
    if (d.start === d.end) return '#999999';
  })
  .axis('y', {
    title: false,
  })
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  });

chart.render();

pearmini · 2024-06-05T02:35:21Z

@1379255913 在 chart 对象上指定 encode.x 之后，就不用在 line 上指定 encode 了：

import { Chart } from '@antv/g2';

const data = [
  { time: '2015-11-19', start: 8.18, max: 8.33, min: 7.98, end: 8.32, volumn: 1810, money: 14723.56 },
  { time: '2015-11-18', start: 8.37, max: 8.6, min: 8.03, end: 8.09, volumn: 2790.37, money: 23309.19 },
  { time: '2015-11-17', start: 8.7, max: 8.78, min: 8.32, end: 8.37, volumn: 3729.04, money: 31709.71 },
  { time: '2015-11-16', start: 8.18, max: 8.69, min: 8.05, end: 8.62, volumn: 3095.44, money: 26100.69 },
  { time: '2015-11-13', start: 8.01, max: 8.75, min: 7.97, end: 8.41, volumn: 5815.58, money: 48562.37 },
  { time: '2015-11-12', start: 7.76, max: 8.18, min: 7.61, end: 8.15, volumn: 4742.6, money: 37565.36 },
  { time: '2015-11-11', start: 7.55, max: 7.81, min: 7.49, end: 7.8, volumn: 3133.82, money: 24065.42 },
  { time: '2015-11-10', start: 7.5, max: 7.68, min: 7.44, end: 7.57, volumn: 2670.35, money: 20210.58 },
  { time: '2015-11-09', start: 7.65, max: 7.66, min: 7.3, end: 7.58, volumn: 2841.79, money: 21344.36 },
  { time: '2015-11-06', start: 7.52, max: 7.71, min: 7.48, end: 7.64, volumn: 2725.44, money: 20721.51 },
  { time: '2015-11-05', start: 7.48, max: 7.57, min: 7.29, end: 7.48, volumn: 3520.85, money: 26140.83 },
  { time: '2015-11-04', start: 7.01, max: 7.5, min: 7.01, end: 7.46, volumn: 3591.47, money: 26285.52 },
  { time: '2015-11-03', start: 7.1, max: 7.17, min: 6.82, end: 7, volumn: 2029.21, money: 14202.33 },
  { time: '2015-11-02', start: 7.09, max: 7.44, min: 6.93, end: 7.17, volumn: 3191.31, money: 23205.11 },
  { time: '2015-10-30', start: 6.98, max: 7.27, min: 6.84, end: 7.18, volumn: 3522.61, money: 25083.44 },
  { time: '2015-10-29', start: 6.94, max: 7.2, min: 6.8, end: 7.05, volumn: 2752.27, money: 19328.44 },
  { time: '2015-10-28', start: 7.01, max: 7.14, min: 6.8, end: 6.85, volumn: 2311.11, money: 16137.32 },
  { time: '2015-10-27', start: 6.91, max: 7.31, min: 6.48, end: 7.18, volumn: 3172.9, money: 21827.3 },
  { time: '2015-10-26', start: 6.9, max: 7.08, min: 6.87, end: 6.95, volumn: 2769.31, money: 19337.44 },
  { time: '2015-10-23', start: 6.71, max: 6.85, min: 6.58, end: 6.79, volumn: 2483.18, money: 16714.31 },
  { time: '2015-10-22', start: 6.38, max: 6.67, min: 6.34, end: 6.65, volumn: 2225.88, money: 14465.56 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .data(data)
  .encode("x", (d) => new Date(d.time)) // 转换成 Date 对象就可以自动排序了
  .encode("color", (d) => { // 通过 encode 生成一个新的 column 就行了
    const trend = Math.sign(d.start - d.end);
    return trend > 0 ? "下跌" : trend === 0 ? "不变" : "上涨";
  })
  .scale('color', {
    domain: ['下跌', '不变', '上涨'],
    range: ['#4daf4a', '#999999', '#e41a1c'],
  });

chart
  .link()
  .encode('y', ['min', 'max']) // 这里不用指定 x 
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  });

chart
  .link()
  .encode('y', ['start', 'end']) // 这里不用指定 x
  .style('fillOpacity', 1)
  .style('stroke', (d) => {
    if (d.start === d.end) return '#999999';
  })
  .style("lineWidth", 10)
  .style("radius", 5)
  .style('lineCap', 'round')
  .axis('y', {
    title: false,
  })
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  });

chart.render();

不过我发现这是两种不同的股票图：上图是连续的 x 轴，下图是离散的 x 轴，下图需要指定 scale.x.compare 属性：

import { Chart } from '@antv/g2';

const data = [
  { time: '2015-11-19', start: 8.18, max: 8.33, min: 7.98, end: 8.32, volumn: 1810, money: 14723.56 },
  { time: '2015-11-18', start: 8.37, max: 8.6, min: 8.03, end: 8.09, volumn: 2790.37, money: 23309.19 },
  { time: '2015-11-17', start: 8.7, max: 8.78, min: 8.32, end: 8.37, volumn: 3729.04, money: 31709.71 },
  { time: '2015-11-16', start: 8.18, max: 8.69, min: 8.05, end: 8.62, volumn: 3095.44, money: 26100.69 },
  { time: '2015-11-13', start: 8.01, max: 8.75, min: 7.97, end: 8.41, volumn: 5815.58, money: 48562.37 },
  { time: '2015-11-12', start: 7.76, max: 8.18, min: 7.61, end: 8.15, volumn: 4742.6, money: 37565.36 },
  { time: '2015-11-11', start: 7.55, max: 7.81, min: 7.49, end: 7.8, volumn: 3133.82, money: 24065.42 },
  { time: '2015-11-10', start: 7.5, max: 7.68, min: 7.44, end: 7.57, volumn: 2670.35, money: 20210.58 },
  { time: '2015-11-09', start: 7.65, max: 7.66, min: 7.3, end: 7.58, volumn: 2841.79, money: 21344.36 },
  { time: '2015-11-06', start: 7.52, max: 7.71, min: 7.48, end: 7.64, volumn: 2725.44, money: 20721.51 },
  { time: '2015-11-05', start: 7.48, max: 7.57, min: 7.29, end: 7.48, volumn: 3520.85, money: 26140.83 },
  { time: '2015-11-04', start: 7.01, max: 7.5, min: 7.01, end: 7.46, volumn: 3591.47, money: 26285.52 },
  { time: '2015-11-03', start: 7.1, max: 7.17, min: 6.82, end: 7, volumn: 2029.21, money: 14202.33 },
  { time: '2015-11-02', start: 7.09, max: 7.44, min: 6.93, end: 7.17, volumn: 3191.31, money: 23205.11 },
  { time: '2015-10-30', start: 6.98, max: 7.27, min: 6.84, end: 7.18, volumn: 3522.61, money: 25083.44 },
  { time: '2015-10-29', start: 6.94, max: 7.2, min: 6.8, end: 7.05, volumn: 2752.27, money: 19328.44 },
  { time: '2015-10-28', start: 7.01, max: 7.14, min: 6.8, end: 6.85, volumn: 2311.11, money: 16137.32 },
  { time: '2015-10-27', start: 6.91, max: 7.31, min: 6.48, end: 7.18, volumn: 3172.9, money: 21827.3 },
  { time: '2015-10-26', start: 6.9, max: 7.08, min: 6.87, end: 6.95, volumn: 2769.31, money: 19337.44 },
  { time: '2015-10-23', start: 6.71, max: 6.85, min: 6.58, end: 6.79, volumn: 2483.18, money: 16714.31 },
  { time: '2015-10-22', start: 6.38, max: 6.67, min: 6.34, end: 6.65, volumn: 2225.88, money: 14465.56 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .data(data)
  .encode('color', (d) => {
    const trend = Math.sign(d.start - d.end);
    return trend > 0 ? '下跌' : trend === 0 ? '不变' : '上涨';
  })
  .scale('color', {
    domain: ['下跌', '不变', '上涨'],
    range: ['#4daf4a', '#999999', '#e41a1c'],
  })
  .scale('x', {
    compare: (a, b) => new Date(a) - new Date(b), // 这里
  });

chart
  .link()
  .encode('x', 'time')
  .encode('y', ['min', 'max'])
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  });

chart
  .interval()
  .encode('x', 'time')
  .encode('y', ['start', 'end'])
  .style('fillOpacity', 1)
  .style('stroke', (d) => {
    if (d.start === d.end) return '#999999';
  })
  .axis('y', {
    title: false,
  })
  .tooltip({
    title: 'time',
    items: [
      { field: 'start', name: '开盘价' },
      { field: 'end', name: '收盘价' },
      { field: 'min', name: '最低价' },
      { field: 'max', name: '最高价' },
    ],
  });

chart.render();

还是就按照你的写的第二种股票图来（或者说你觉得哪一种好一点？），只不过使用 scale.x.compare 属性就好啦！

1379255913 · 2024-06-05T06:24:27Z

已解决之前的问题，请提供一下三张图片的地址

pearmini · 2024-06-05T06:30:11Z

@1379255913

https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ehjWTYLKU_wAAAAAAAAAAAAADmJ7AQ/original
https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*h_ykRqdQySkAAAAAAAAAAAAADmJ7AQ/original
https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cYx-T6bM3AYAAAAAAAAAAAAADmJ7AQ/original

1379255913 · 2024-06-05T06:33:42Z

第一张图片没给，前两个重复了

pearmini · 2024-06-05T06:42:17Z

@1379255913 我更新了一下

1379255913 · 2024-06-05T06:50:51Z

已更新

pearmini

🚀🚀🚀

pearmini · 2024-06-17T07:28:38Z

感谢参与到 G2 的贡献中！感兴趣的话可以加入下面的贡献者群，了解更多的动态🤣

1379255913 added 2 commits June 3, 2024 23:07

docs: add simple candlestick demos

fb7ff40

Merge branch 'antvis:v5' into v5

afc8551

pearmini requested changes Jun 4, 2024

View reviewed changes

site/examples/general/candlestick/demo/basis.ts Outdated Show resolved Hide resolved

site/examples/general/candlestick/demo/k-and-area.ts Outdated Show resolved Hide resolved

site/examples/general/candlestick/demo/k-and-column.ts Outdated Show resolved Hide resolved

docs: improved writing

9d3658f

docs: update screenshot

733a048

pearmini approved these changes Jun 5, 2024

View reviewed changes

pearmini merged commit 6760603 into antvis:v5 Jun 5, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add simple candlestick demos #6265

docs: add simple candlestick demos #6265

1379255913 commented Jun 3, 2024

1379255913 commented Jun 3, 2024

pearmini left a comment

coveralls commented Jun 4, 2024 •

edited

Loading

1379255913 commented Jun 4, 2024

pearmini commented Jun 5, 2024 •

edited

Loading

1379255913 commented Jun 5, 2024

pearmini commented Jun 5, 2024 •

edited

Loading

1379255913 commented Jun 5, 2024

pearmini commented Jun 5, 2024

1379255913 commented Jun 5, 2024

pearmini left a comment

pearmini commented Jun 17, 2024

docs: add simple candlestick demos #6265

docs: add simple candlestick demos #6265

Conversation

1379255913 commented Jun 3, 2024

Checklist

1379255913 commented Jun 3, 2024

pearmini left a comment

Choose a reason for hiding this comment

coveralls commented Jun 4, 2024 • edited Loading

Pull Request Test Coverage Report for Build 9379527619

Warning: This coverage report may be inaccurate.

Details

💛 - Coveralls

1379255913 commented Jun 4, 2024

pearmini commented Jun 5, 2024 • edited Loading

1379255913 commented Jun 5, 2024

pearmini commented Jun 5, 2024 • edited Loading

1379255913 commented Jun 5, 2024

pearmini commented Jun 5, 2024

1379255913 commented Jun 5, 2024

pearmini left a comment

Choose a reason for hiding this comment

pearmini commented Jun 17, 2024

coveralls commented Jun 4, 2024 •

edited

Loading

pearmini commented Jun 5, 2024 •

edited

Loading

pearmini commented Jun 5, 2024 •

edited

Loading