diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts
index f67686a52..6733f0d5e 100644
--- a/site/.dumi/global.ts
+++ b/site/.dumi/global.ts
@@ -6,6 +6,8 @@ if (window) {
window.React = require('react');
window.ReactDOM = require('react-dom');
window.gPluginRoughCanvasRenderer = require('@antv/g-plugin-rough-canvas-renderer');
+ (window as any).lilGui = require('lil-gui');
+ (window as any).stats = require('stats.js');
// window.f2 = require('./src/index-all.js');
// window.DataSet = require('@antv/data-set');
window.lodash = require('lodash');
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index 1d5ac767c..5e25bc7d0 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -151,7 +151,6 @@ export default defineConfig({
en: 'Getting Started',
},
link: `/tutorial/getting-started`,
-
},
{
text: {
@@ -352,6 +351,7 @@ export default defineConfig({
+
`,
json: {
diff --git a/site/examples/creative/case/demo/meta.json b/site/examples/creative/case/demo/meta.json
index 64bac7fff..ba45a7cee 100644
--- a/site/examples/creative/case/demo/meta.json
+++ b/site/examples/creative/case/demo/meta.json
@@ -29,6 +29,11 @@
"title": "折线图动态排序",
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/XjBinPfpXY/line-race.gif"
},
+ {
+ "filename": "player.jsx",
+ "title": "折线图动画",
+ "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/qKUDEeJ7aFiPN4RHxhgbP/Kapture_2024_11_18_at_15_59_55.gif"
+ },
{
"filename": "apple-watch.jsx",
"title": "Apple Watch 健身记录",
diff --git a/site/examples/creative/case/demo/player.jsx b/site/examples/creative/case/demo/player.jsx
new file mode 100644
index 000000000..516b129ad
--- /dev/null
+++ b/site/examples/creative/case/demo/player.jsx
@@ -0,0 +1,1319 @@
+/** @jsx jsx */
+import { Axis, Canvas, Chart, jsx, Line, Player, RectGuide, TextGuide } from '@antv/f2';
+import 'lil-gui';
+const context = document.getElementById('container').getContext('2d');
+const $wrapper = document.getElementById('mobile-footer');
+const data = [
+ {
+ x: '2003-01-01',
+ y: 348.05,
+ },
+ {
+ x: '2003-01-29',
+ y: 365.95,
+ },
+ {
+ x: '2003-02-26',
+ y: 354.35,
+ },
+ {
+ x: '2003-03-26',
+ y: 330.25,
+ },
+ {
+ x: '2003-04-23',
+ y: 331.25,
+ },
+ {
+ x: '2003-05-21',
+ y: 371.55,
+ },
+ {
+ x: '2003-06-18',
+ y: 357.35,
+ },
+ {
+ x: '2003-07-16',
+ y: 343.55,
+ },
+ {
+ x: '2003-08-13',
+ y: 362.7,
+ },
+ {
+ x: '2003-09-10',
+ y: 380.45,
+ },
+ {
+ x: '2003-10-08',
+ y: 375.25,
+ },
+ {
+ x: '2003-11-05',
+ y: 381.35,
+ },
+ {
+ x: '2003-12-03',
+ y: 404.75,
+ },
+ {
+ x: '2003-12-31',
+ y: 415.45,
+ },
+ {
+ x: '2004-01-28',
+ y: 410.35,
+ },
+ {
+ x: '2004-02-25',
+ y: 396.05,
+ },
+ {
+ x: '2004-03-24',
+ y: 415.55,
+ },
+ {
+ x: '2004-04-21',
+ y: 390.05,
+ },
+ {
+ x: '2004-05-19',
+ y: 382.45,
+ },
+ {
+ x: '2004-06-16',
+ y: 384.65,
+ },
+ {
+ x: '2004-07-14',
+ y: 405.45,
+ },
+ {
+ x: '2004-08-11',
+ y: 395.45,
+ },
+ {
+ x: '2004-09-08',
+ y: 399.65,
+ },
+ {
+ x: '2004-10-06',
+ y: 417.88,
+ },
+ {
+ x: '2004-11-03',
+ y: 426.85,
+ },
+ {
+ x: '2004-12-01',
+ y: 454.75,
+ },
+ {
+ x: '2004-12-29',
+ y: 436.45,
+ },
+ {
+ x: '2005-01-26',
+ y: 426.8,
+ },
+ {
+ x: '2005-02-23',
+ y: 434.55,
+ },
+ {
+ x: '2005-03-23',
+ y: 425.35,
+ },
+ {
+ x: '2005-04-20',
+ y: 434.6,
+ },
+ {
+ x: '2005-05-18',
+ y: 421.75,
+ },
+ {
+ x: '2005-06-15',
+ y: 428.9,
+ },
+ {
+ x: '2005-07-13',
+ y: 424.1,
+ },
+ {
+ x: '2005-08-10',
+ y: 437.6,
+ },
+ {
+ x: '2005-09-07',
+ y: 444.7,
+ },
+ {
+ x: '2005-10-05',
+ y: 464.75,
+ },
+ {
+ x: '2005-11-02',
+ y: 463.2,
+ },
+ {
+ x: '2005-11-30',
+ y: 493.08,
+ },
+ {
+ x: '2005-12-28',
+ y: 516.6,
+ },
+ {
+ x: '2006-01-25',
+ y: 563.4,
+ },
+ {
+ x: '2006-02-22',
+ y: 555.2,
+ },
+ {
+ x: '2006-03-22',
+ y: 550.8,
+ },
+ {
+ x: '2006-04-19',
+ y: 640.2,
+ },
+ {
+ x: '2006-05-17',
+ y: 687.1,
+ },
+ {
+ x: '2006-06-14',
+ y: 559.75,
+ },
+ {
+ x: '2006-07-12',
+ y: 651.53,
+ },
+ {
+ x: '2006-08-09',
+ y: 650.03,
+ },
+ {
+ x: '2006-09-06',
+ y: 633.7,
+ },
+ {
+ x: '2006-10-04',
+ y: 567,
+ },
+ {
+ x: '2006-11-01',
+ y: 617.6,
+ },
+ {
+ x: '2006-11-29',
+ y: 636.65,
+ },
+ {
+ x: '2006-12-27',
+ y: 627.2,
+ },
+ {
+ x: '2007-01-24',
+ y: 648.8,
+ },
+ {
+ x: '2007-02-21',
+ y: 678.85,
+ },
+ {
+ x: '2007-03-21',
+ y: 664.2,
+ },
+ {
+ x: '2007-04-18',
+ y: 690.05,
+ },
+ {
+ x: '2007-05-16',
+ y: 662.15,
+ },
+ {
+ x: '2007-06-13',
+ y: 651.75,
+ },
+ {
+ x: '2007-07-11',
+ y: 660.65,
+ },
+ {
+ x: '2007-08-08',
+ y: 674.8,
+ },
+ {
+ x: '2007-09-05',
+ y: 681.8,
+ },
+ {
+ x: '2007-10-03',
+ y: 727.9,
+ },
+ {
+ x: '2007-10-31',
+ y: 796.59,
+ },
+ {
+ x: '2007-11-28',
+ y: 804.83,
+ },
+ {
+ x: '2007-12-26',
+ y: 824.5,
+ },
+ {
+ x: '2008-01-23',
+ y: 890.32,
+ },
+ {
+ x: '2008-02-20',
+ y: 944.1,
+ },
+ {
+ x: '2008-03-19',
+ y: 944.2,
+ },
+ {
+ x: '2008-04-16',
+ y: 944.59,
+ },
+ {
+ x: '2008-05-14',
+ y: 864,
+ },
+ {
+ x: '2008-06-11',
+ y: 880.35,
+ },
+ {
+ x: '2008-07-09',
+ y: 928.57,
+ },
+ {
+ x: '2008-08-06',
+ y: 879.8,
+ },
+ {
+ x: '2008-09-03',
+ y: 801.3,
+ },
+ {
+ x: '2008-10-01',
+ y: 870.8,
+ },
+ {
+ x: '2008-10-29',
+ y: 754.95,
+ },
+ {
+ x: '2008-11-26',
+ y: 812.9,
+ },
+ {
+ x: '2008-12-24',
+ y: 848,
+ },
+ {
+ x: '2009-01-21',
+ y: 854.25,
+ },
+ {
+ x: '2009-02-18',
+ y: 984.9,
+ },
+ {
+ x: '2009-03-18',
+ y: 942,
+ },
+ {
+ x: '2009-04-15',
+ y: 891.05,
+ },
+ {
+ x: '2009-05-13',
+ y: 926.3,
+ },
+ {
+ x: '2009-06-10',
+ y: 954.49,
+ },
+ {
+ x: '2009-07-08',
+ y: 909.5,
+ },
+ {
+ x: '2009-08-05',
+ y: 963.45,
+ },
+ {
+ x: '2009-09-02',
+ y: 978.5,
+ },
+ {
+ x: '2009-09-30',
+ y: 1007.7,
+ },
+ {
+ x: '2009-10-28',
+ y: 1028.1,
+ },
+ {
+ x: '2009-11-25',
+ y: 1191.8,
+ },
+ {
+ x: '2009-12-23',
+ y: 1087.55,
+ },
+ {
+ x: '2010-01-20',
+ y: 1111.05,
+ },
+ {
+ x: '2010-02-17',
+ y: 1106.81,
+ },
+ {
+ x: '2010-03-17',
+ y: 1120.35,
+ },
+ {
+ x: '2010-04-14',
+ y: 1155.35,
+ },
+ {
+ x: '2010-05-12',
+ y: 1238.93,
+ },
+ {
+ x: '2010-06-09',
+ y: 1233.5,
+ },
+ {
+ x: '2010-07-07',
+ y: 1202.75,
+ },
+ {
+ x: '2010-08-04',
+ y: 1194.95,
+ },
+ {
+ x: '2010-09-01',
+ y: 1244.3,
+ },
+ {
+ x: '2010-09-29',
+ y: 1309.85,
+ },
+ {
+ x: '2010-10-27',
+ y: 1325.35,
+ },
+ {
+ x: '2010-11-24',
+ y: 1375,
+ },
+ {
+ x: '2010-12-22',
+ y: 1385.35,
+ },
+ {
+ x: '2011-01-19',
+ y: 1369.93,
+ },
+ {
+ x: '2011-02-16',
+ y: 1374.43,
+ },
+ {
+ x: '2011-03-16',
+ y: 1398.88,
+ },
+ {
+ x: '2011-04-13',
+ y: 1457.3,
+ },
+ {
+ x: '2011-05-11',
+ y: 1501.2,
+ },
+ {
+ x: '2011-06-08',
+ y: 1537.65,
+ },
+ {
+ x: '2011-07-06',
+ y: 1528.9,
+ },
+ {
+ x: '2011-08-03',
+ y: 1661.75,
+ },
+ {
+ x: '2011-08-31',
+ y: 1825.72,
+ },
+ {
+ x: '2011-09-28',
+ y: 1608.8,
+ },
+ {
+ x: '2011-10-26',
+ y: 1724.82,
+ },
+ {
+ x: '2011-11-23',
+ y: 1692.27,
+ },
+ {
+ x: '2011-12-21',
+ y: 1615.23,
+ },
+ {
+ x: '2012-01-18',
+ y: 1659.95,
+ },
+ {
+ x: '2012-02-15',
+ y: 1728.15,
+ },
+ {
+ x: '2012-03-14',
+ y: 1644.88,
+ },
+ {
+ x: '2012-04-11',
+ y: 1659.13,
+ },
+ {
+ x: '2012-05-09',
+ y: 1589.57,
+ },
+ {
+ x: '2012-06-06',
+ y: 1619.3,
+ },
+ {
+ x: '2012-07-04',
+ y: 1615.63,
+ },
+ {
+ x: '2012-08-01',
+ y: 1599.48,
+ },
+ {
+ x: '2012-08-29',
+ y: 1656.5,
+ },
+ {
+ x: '2012-09-26',
+ y: 1752.75,
+ },
+ {
+ x: '2012-10-24',
+ y: 1701.95,
+ },
+ {
+ x: '2012-11-21',
+ y: 1728.7,
+ },
+ {
+ x: '2012-12-19',
+ y: 1667.25,
+ },
+ {
+ x: '2013-01-16',
+ y: 1679.95,
+ },
+ {
+ x: '2013-02-13',
+ y: 1642.55,
+ },
+ {
+ x: '2013-03-13',
+ y: 1587.7,
+ },
+ {
+ x: '2013-04-10',
+ y: 1558.54,
+ },
+ {
+ x: '2013-05-08',
+ y: 1474.07,
+ },
+ {
+ x: '2013-06-05',
+ y: 1403.4,
+ },
+ {
+ x: '2013-07-03',
+ y: 1252.83,
+ },
+ {
+ x: '2013-07-31',
+ y: 1325.25,
+ },
+ {
+ x: '2013-08-28',
+ y: 1417.51,
+ },
+ {
+ x: '2013-09-25',
+ y: 1334.48,
+ },
+ {
+ x: '2013-10-23',
+ y: 1333.42,
+ },
+ {
+ x: '2013-11-20',
+ y: 1244.25,
+ },
+ {
+ x: '2013-12-18',
+ y: 1218.5,
+ },
+ {
+ x: '2014-01-15',
+ y: 1241.86,
+ },
+ {
+ x: '2014-02-12',
+ y: 1291.18,
+ },
+ {
+ x: '2014-03-12',
+ y: 1366.54,
+ },
+ {
+ x: '2014-04-09',
+ y: 1312.09,
+ },
+ {
+ x: '2014-05-07',
+ y: 1289.57,
+ },
+ {
+ x: '2014-06-04',
+ y: 1245.35,
+ },
+ {
+ x: '2014-07-02',
+ y: 1327.2,
+ },
+ {
+ x: '2014-07-30',
+ y: 1295.88,
+ },
+ {
+ x: '2014-08-27',
+ y: 1282.32,
+ },
+ {
+ x: '2014-09-24',
+ y: 1216.85,
+ },
+ {
+ x: '2014-10-22',
+ y: 1242.14,
+ },
+ {
+ x: '2014-11-19',
+ y: 1182.06,
+ },
+ {
+ x: '2014-12-17',
+ y: 1189,
+ },
+ {
+ x: '2015-01-14',
+ y: 1229.68,
+ },
+ {
+ x: '2015-02-11',
+ y: 1218.85,
+ },
+ {
+ x: '2015-03-11',
+ y: 1154.78,
+ },
+ {
+ x: '2015-04-08',
+ y: 1202.65,
+ },
+ {
+ x: '2015-05-06',
+ y: 1191.29,
+ },
+ {
+ x: '2015-06-03',
+ y: 1184.95,
+ },
+ {
+ x: '2015-07-01',
+ y: 1168.6,
+ },
+ {
+ x: '2015-07-29',
+ y: 1096.55,
+ },
+ {
+ x: '2015-08-26',
+ y: 1124.75,
+ },
+ {
+ x: '2015-09-23',
+ y: 1129.95,
+ },
+ {
+ x: '2015-10-21',
+ y: 1166.65,
+ },
+ {
+ x: '2015-11-18',
+ y: 1071.07,
+ },
+ {
+ x: '2015-12-16',
+ y: 1072.71,
+ },
+ {
+ x: '2016-01-14',
+ y: 1077.81,
+ },
+ {
+ x: '2016-02-11',
+ y: 1246.68,
+ },
+ {
+ x: '2016-03-10',
+ y: 1271.2,
+ },
+ {
+ x: '2016-04-07',
+ y: 1240.35,
+ },
+ {
+ x: '2016-05-05',
+ y: 1278,
+ },
+ {
+ x: '2016-06-02',
+ y: 1210.55,
+ },
+ {
+ x: '2016-06-30',
+ y: 1321.51,
+ },
+ {
+ x: '2016-07-28',
+ y: 1335.05,
+ },
+ {
+ x: '2016-08-25',
+ y: 1321.8,
+ },
+ {
+ x: '2016-09-23',
+ y: 1337.1,
+ },
+ {
+ x: '2016-10-21',
+ y: 1265.71,
+ },
+ {
+ x: '2016-11-18',
+ y: 1207.97,
+ },
+ {
+ x: '2016-12-16',
+ y: 1134.9,
+ },
+ {
+ x: '2017-01-13',
+ y: 1197.02,
+ },
+ {
+ x: '2017-02-13',
+ y: 1225.2,
+ },
+ {
+ x: '2017-03-13',
+ y: 1203.4,
+ },
+ {
+ x: '2017-04-10',
+ y: 1254.33,
+ },
+ {
+ x: '2017-05-08',
+ y: 1225.4,
+ },
+ {
+ x: '2017-06-06',
+ y: 1293.65,
+ },
+ {
+ x: '2017-07-04',
+ y: 1223,
+ },
+ {
+ x: '2017-08-01',
+ y: 1268.65,
+ },
+ {
+ x: '2017-08-29',
+ y: 1309.05,
+ },
+ {
+ x: '2017-09-26',
+ y: 1293.35,
+ },
+ {
+ x: '2017-10-24',
+ y: 1276.05,
+ },
+ {
+ x: '2017-11-21',
+ y: 1280.03,
+ },
+ {
+ x: '2017-12-19',
+ y: 1264.28,
+ },
+ {
+ x: '2018-01-16',
+ y: 1338.2,
+ },
+ {
+ x: '2018-02-13',
+ y: 1329.159,
+ },
+ {
+ x: '2018-03-13',
+ y: 1326.2,
+ },
+ {
+ x: '2018-04-10',
+ y: 1339.4,
+ },
+ {
+ x: '2018-05-08',
+ y: 1314.4,
+ },
+ {
+ x: '2018-06-05',
+ y: 1296.3,
+ },
+ {
+ x: '2018-07-03',
+ y: 1252.8,
+ },
+ {
+ x: '2018-07-31',
+ y: 1223.7,
+ },
+ {
+ x: '2018-08-28',
+ y: 1200.8,
+ },
+ {
+ x: '2018-09-25',
+ y: 1200.9,
+ },
+ {
+ x: '2018-10-23',
+ y: 1229.9,
+ },
+ {
+ x: '2018-11-20',
+ y: 1221.3,
+ },
+ {
+ x: '2018-12-18',
+ y: 1249.195,
+ },
+ {
+ x: '2019-01-16',
+ y: 1293.4,
+ },
+ {
+ x: '2019-02-13',
+ y: 1305.975,
+ },
+ {
+ x: '2019-03-13',
+ y: 1309,
+ },
+ {
+ x: '2019-04-10',
+ y: 1307.9,
+ },
+ {
+ x: '2019-05-08',
+ y: 1280.5,
+ },
+ {
+ x: '2019-06-05',
+ y: 1329.7,
+ },
+ {
+ x: '2019-07-03',
+ y: 1418.5,
+ },
+ {
+ x: '2019-07-31',
+ y: 1413.7,
+ },
+ {
+ x: '2019-08-28',
+ y: 1539.2,
+ },
+ {
+ x: '2019-09-25',
+ y: 1503.7,
+ },
+ {
+ x: '2019-10-23',
+ y: 1492,
+ },
+ {
+ x: '2019-11-20',
+ y: 1471.5,
+ },
+ {
+ x: '2019-12-18',
+ y: 1475.2,
+ },
+ {
+ x: '2020-01-15',
+ y: 1556,
+ },
+ {
+ x: '2020-02-12',
+ y: 1565.6,
+ },
+ {
+ x: '2020-03-11',
+ y: 1634.6,
+ },
+ {
+ x: '2020-04-08',
+ y: 1644.8,
+ },
+ {
+ x: '2020-05-07',
+ y: 1715.6,
+ },
+ {
+ x: '2020-06-05',
+ y: 1681.6,
+ },
+ {
+ x: '2020-07-03',
+ y: 1774.31,
+ },
+ {
+ x: '2020-07-31',
+ y: 1974.9,
+ },
+ {
+ x: '2020-08-28',
+ y: 1964.5,
+ },
+ {
+ x: '2020-09-25',
+ y: 1860,
+ },
+ {
+ x: '2020-10-23',
+ y: 1901.174,
+ },
+ {
+ x: '2020-11-20',
+ y: 1870.598,
+ },
+ {
+ x: '2020-12-18',
+ y: 1880.895,
+ },
+ {
+ x: '2021-01-18',
+ y: 1836.99,
+ },
+ {
+ x: '2021-02-15',
+ y: 1817.46,
+ },
+ {
+ x: '2021-03-15',
+ y: 1731.5,
+ },
+ {
+ x: '2021-04-12',
+ y: 1732.4,
+ },
+ {
+ x: '2021-05-10',
+ y: 1835.63,
+ },
+ {
+ x: '2021-06-07',
+ y: 1898.9,
+ },
+ {
+ x: '2021-07-05',
+ y: 1791.66,
+ },
+ {
+ x: '2021-08-02',
+ y: 1813.31,
+ },
+ {
+ x: '2021-08-30',
+ y: 1809.21,
+ },
+ {
+ x: '2021-09-27',
+ y: 1749.728,
+ },
+ {
+ x: '2021-10-25',
+ y: 1807.4,
+ },
+ {
+ x: '2021-11-22',
+ y: 1804.282,
+ },
+ {
+ x: '2021-12-20',
+ y: 1790.6,
+ },
+ {
+ x: '2022-01-17',
+ y: 1818.53,
+ },
+ {
+ x: '2022-02-14',
+ y: 1871.04,
+ },
+ {
+ x: '2022-03-14',
+ y: 1950.3,
+ },
+ {
+ x: '2022-04-11',
+ y: 1953.54,
+ },
+ {
+ x: '2022-05-10',
+ y: 1837.992,
+ },
+ {
+ x: '2022-06-07',
+ y: 1852.08,
+ },
+ {
+ x: '2022-07-05',
+ y: 1764.2,
+ },
+ {
+ x: '2022-08-02',
+ y: 1760,
+ },
+ {
+ x: '2022-08-30',
+ y: 1723.6,
+ },
+ {
+ x: '2022-09-27',
+ y: 1628.7,
+ },
+ {
+ x: '2022-10-25',
+ y: 1652.6,
+ },
+ {
+ x: '2022-11-22',
+ y: 1739.7,
+ },
+ {
+ x: '2022-12-20',
+ y: 1816.675,
+ },
+ {
+ x: '2023-01-18',
+ y: 1903.7,
+ },
+ {
+ x: '2023-02-15',
+ y: 1835.6,
+ },
+ {
+ x: '2023-03-15',
+ y: 1917.72,
+ },
+ {
+ x: '2023-04-12',
+ y: 2014.6,
+ },
+ {
+ x: '2023-05-10',
+ y: 2029.49,
+ },
+ {
+ x: '2023-06-07',
+ y: 1939.51,
+ },
+ {
+ x: '2023-07-05',
+ y: 1914.6,
+ },
+ {
+ x: '2023-08-02',
+ y: 1934.13,
+ },
+ {
+ x: '2023-08-30',
+ y: 1942.07,
+ },
+ {
+ x: '2023-09-27',
+ y: 1874.57,
+ },
+ {
+ x: '2023-10-25',
+ y: 1979.3,
+ },
+ {
+ x: '2023-11-22',
+ y: 1989.548,
+ },
+ {
+ x: '2023-12-20',
+ y: 2031.735,
+ },
+ {
+ x: '2024-01-17',
+ y: 2005.945,
+ },
+ {
+ x: '2024-02-14',
+ y: 1992.105,
+ },
+ {
+ x: '2024-03-13',
+ y: 2174.128,
+ },
+ {
+ x: '2024-04-11',
+ y: 2372.016,
+ },
+ {
+ x: '2024-05-09',
+ y: 2346.211,
+ },
+ {
+ x: '2024-06-06',
+ y: 2375.375,
+ },
+ {
+ x: '2024-07-04',
+ y: 2356.52,
+ },
+ {
+ x: '2024-08-01',
+ y: 2446.065,
+ },
+ {
+ x: '2024-08-29',
+ y: 2520.9,
+ },
+ {
+ x: '2024-09-27',
+ y: 2657.97,
+ },
+];
+
+const guideData = [
+ {
+ d0: [
+ {
+ x: '2003-03-26',
+ y: 'min',
+ },
+ {
+ x: '2005-03-23',
+ y: 'max',
+ },
+ ],
+ text: {
+ x: '2003-03-26',
+ y: 'max',
+ },
+ textContent: '伊拉克战争',
+ },
+ {
+ d0: [
+ {
+ x: '2007-04-18',
+ y: 'min',
+ },
+ {
+ x: '2008-03-19',
+ y: 'max',
+ },
+ ],
+ text: {
+ x: '2007-04-18',
+ y: 'max',
+ },
+ textContent: '次贷危机',
+ },
+ {
+ d0: [
+ {
+ x: '2019-12-18',
+ y: 'min',
+ },
+ {
+ x: '2020-08-28',
+ y: 'max',
+ },
+ ],
+ text: {
+ x: '2019-12-18',
+ y: 'max',
+ },
+ textContent: '新冠疫情',
+ },
+ {
+ d0: [
+ {
+ x: '2024-01-17',
+ y: 'min',
+ },
+ {
+ x: '2024-09-27',
+ y: 'max',
+ },
+ ],
+ text: {
+ x: '2024-01-17',
+ y: 'max',
+ },
+ textContent: '地缘冲突\n叠加大选',
+ },
+];
+
+const keyFrames = [
+ {
+ line: {
+ to: {
+ data,
+ },
+ duration: 1500,
+ },
+ },
+ {
+ 'rect-0': { to: { visible: true }, duration: 500 },
+ 'text-0': { to: { visible: true }, duration: 500 },
+ },
+ {
+ 'rect-1': { to: { visible: true }, duration: 500 },
+ 'text-1': { to: { visible: true }, duration: 500 },
+ },
+ {
+ 'rect-2': { to: { visible: true }, duration: 500 },
+ 'text-2': { to: { visible: true }, duration: 500 },
+ },
+ {
+ 'rect-3': { to: { visible: true }, duration: 500 },
+ 'text-3': { to: { visible: true }, duration: 500 },
+ },
+];
+let playRef = { current: null };
+const { props } = (
+
+);
+
+const canvas = new Canvas(props);
+canvas.render().then(() => {
+ //UI
+ const gui = new lil.GUI({ autoPlace: false });
+ $wrapper.appendChild(gui.domElement);
+ const animationFolder = gui.addFolder('animation');
+ const animationConfig = {
+ play: () => {
+ playRef.current.setPlayState('play');
+ },
+ pause: () => {
+ playRef.current.setPlayState('pause');
+ },
+ goto: 0,
+ };
+ animationFolder.add(animationConfig, 'play').name('Play');
+ animationFolder.add(animationConfig, 'pause').name('Pause');
+ animationFolder.add(animationConfig, 'goto', 0, 3500).onChange((n) => {
+ playRef.current.goTo(n);
+ });
+ animationFolder.open();
+});
diff --git a/site/examples/creative/plugin/demo/rough.jsx b/site/examples/creative/plugin/demo/rough.jsx
index bd5627892..3d18032db 100644
--- a/site/examples/creative/plugin/demo/rough.jsx
+++ b/site/examples/creative/plugin/demo/rough.jsx
@@ -1,14 +1,25 @@
/** @jsx jsx */
-import { Canvas, Chart, Interval, jsx, Axis, CanvasRenderer } from '@antv/f2';
+import { Axis, Canvas, CanvasRenderer, Chart, Interval, jsx } from '@antv/f2';
import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
const context = document.getElementById('container').getContext('2d');
const data = [
- { genre: 'Sports', sold: 275 },
- { genre: 'Strategy', sold: 115 },
- { genre: 'Action', sold: 120 },
- { genre: 'Shooter', sold: 350 },
- { genre: 'Other', sold: 150 },
+ { version: '5.0.21', rate: 1, type: 'iphone6' },
+ { version: '5.0.21', rate: 13, type: '仿真' },
+ { version: '5.0.21', type: 'iphone8', rate: 11 },
+ { version: '5.0.21', type: 'iphone x', rate: 0 },
+
+ { version: '5.0.29', rate: 1, type: 'iphone6' },
+ { version: '5.0.29', rate: 14, type: '仿真' },
+ { version: '5.0.29', type: 'iphone8', rate: 10 },
+ { version: '5.0.29', type: 'iphone x', rate: 0 },
+
+ { version: '5.0.30', rate: 1, type: 'iphone6' },
+ { version: '5.0.30', rate: 15, type: '仿真' },
+ { version: '5.0.30', type: 'iphone8', rate: 13 },
+ { version: '5.0.30', type: 'iphone x', rate: 12 },
+
+ { version: 'next', type: 'iphone x', rate: 24 },
];
// create a renderer
@@ -18,11 +29,11 @@ canvasRenderer.registerPlugin(new PluginRoughCanvasRenderer());
const { props } = (
);
const canvas = new Canvas(props);
-canvas.render();
\ No newline at end of file
+canvas.render();
diff --git a/site/package.json b/site/package.json
index 6cc1f3d90..b6e3e83cd 100644
--- a/site/package.json
+++ b/site/package.json
@@ -28,6 +28,7 @@
"dumi": "^2.0.0",
"f2-touchemulator": "~0.0.1",
"gh-pages": "^2.1.1",
+ "lil-gui": "^0.20.0",
"stats.js": "^0.17.0"
},
"devDependencies": {
diff --git a/site/site/global.less b/site/site/global.less
index d9ade7b41..e569093fd 100644
--- a/site/site/global.less
+++ b/site/site/global.less
@@ -23,3 +23,7 @@
height: 260px;
}
}
+
+.mobile-footer {
+
+}