feat: 补充兼容性文档&修改webpack配置

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            "> 1%",
+            "last 2 versions"
+          ]
+        }
+      }
+    ]
+  ]
+}

docs/manual/faq.en.md

@@ -3,4 +3,198 @@ title: FAQ
 order: 5
 ---
 
-`markdown:docs/manual/faq.zh.md`
+## How do export images
+
+Considering the different use environment (browser, mobile, etc.) of G2, starting from version 4, G2 no longer provides `chart.todataURL()` and `chart.downloadiimage()` interfaces, which encourages users to encapsulate themselves.
+
+You can refer to the following utility functions (which cover most scenarios, but do not guarantee that there are no compatibility issues, **for reference only**) :
+
+<details>
+  <summary>
+  Reference scheme (click to expand) :
+  </summary>
+
+```ts
+/**
+ * Returns the dataURL for the chart to generate the image.
+ * @param chart requires a Chart instance of Dataurl
+ * @returns Returns the dataURL of the chart
+ */
+function toDataURL(chart: Chart) {
+  const canvas = chart.getCanvas();
+  const renderer = chart.renderer;
+  const canvasDom = canvas.get('el');
+  let dataURL = '';
+  if (renderer === 'svg') {
+    const clone = canvasDom.cloneNode(true);
+    const svgDocType = document.implementation.createDocumentType(
+      'svg',
+      '-//W3C//DTD SVG 1.1//EN',
+      'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'
+    );
+    const svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType);
+    svgDoc.replaceChild(clone, svgDoc.documentElement);
+    const svgData = new XMLSerializer().serializeToString(svgDoc);
+    dataURL = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(svgData);
+  } else if (renderer === 'canvas') {
+    dataURL = canvasDom.toDataURL('image/png');
+  }
+  return dataURL;
+}
+
+/**
+ * Chart pictures exported
+ * @param chart chart instance
+ * @param name image name, optional, default name 'G2Chart'
+ */
+function downloadImage(chart: Chart, name: string = 'G2Chart') {
+  const link = document.createElement('a');
+  const renderer = chart.renderer;
+  const filename = `${name}${renderer === 'svg' ? '.svg' : '.png'}`;
+  const canvas = chart.getCanvas();
+  canvas.get('timeline').stopAllAnimations();
+
+  setTimeout(() => {
+    const dataURL = toDataURL(chart);
+    if (window.Blob && window.URL && renderer !== 'svg') {
+      const arr = dataURL.split(',');
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bstr = atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      const blobObj = new Blob([u8arr], { type: mime });
+      if (window.navigator.msSaveBlob) {
+        window.navigator.msSaveBlob(blobObj, filename);
+      } else {
+        link.addEventListener('click', () => {
+          link.download = filename;
+          link.href = window.URL.createObjectURL(blobObj);
+        });
+      }
+    } else {
+      link.addEventListener('click', () => {
+        link.download = filename;
+        link.href = dataURL;
+      });
+    }
+    const e = document.createEvent('MouseEvents');
+    e.initEvent('click', false, false);
+    link.dispatchEvent(e);
+  }, 16);
+}
+```
+
+</details>
+
+In addition, access to the canvas dataURI data, you can also use the images are downloaded [download](https://github.com/rndme/download).
+
+## Duplicate values appear in the Tooltip
+
+When drawing an area map, you often encounter the following problem: two values appear on the Tooltip for the same data.
+
+<img src="https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*fAKvSaa-wQIAAAAAAAAAAABkARQnAQ" width=400 />
+
+<details>
+  <summary>
+  chart code(click to expand)：
+  </summary>
+
+```ts
+import { Chart } from '@antv/g2';
+
+const data = [
+  { year: '1991', value: 15468 },
+  { year: '1992', value: 16100 },
+  { year: '1993', value: 15900 },
+  { year: '1994', value: 17409 },
+  { year: '1995', value: 17000 },
+  { year: '1996', value: 31056 },
+  { year: '1997', value: 31982 },
+  { year: '1998', value: 32040 },
+  { year: '1999', value: 33233 },
+];
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+  height: 500,
+});
+
+chart.data(data);
+chart.scale({
+  value: {
+    min: 10000,
+    nice: true,
+  },
+  year: {
+    range: [0, 1],
+  },
+});
+chart.tooltip({
+  showCrosshairs: true,
+  shared: true,
+});
+
+chart.axis('value', {
+  label: {
+    formatter: (val) => {
+      return (+val / 10000).toFixed(1) + 'k';
+    },
+  },
+});
+
+// highlight-start
+chart.area().position('year*value').color('l(90) 0:#1890FF 1:#f7f7f7');
+chart.line().position('year*value');
+// highlight-end
+
+chart.render();
+```
+
+</details>
+
+**Reasons**：Because Chart.area () and Chart.line () are configured with different colors in the code, the Tooltip de-duplication rules take the colors into account and treat different colors as different data.
+
+**Solution**：
+
+1. You can turn off one of the tooltips, such as `chart.area().tooltip(false)`.
+
+2. Listen for the `chart.on('tooltip:change')` event to dynamically modify 'items'.
+
+## Legend sets Marker. Symbol error or not displayed
+
+The Legend Marker type (Symbol) supported by G2 4.0 is: `"circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"`, specific can see [API](/zh/docs/api/general/legend#marker)
+
+- 🗑️ `triangleDown` tag type removed, changed to `triangle - down`
+- 🗑️ `hollow - *` tag types such as removed, you can set `style` to achieve the effect of the hollow
+
+## Browser compatibility
+
+> Due to the condition limit, the lower version limit is only for reference, which does not mean that the lower version cannot be supported. The test was completed in CDN mode. [online Demo](https://lxfu1.github.io/browser-compatibility-of-antv).
+
+|        | Chrome | Edge | Firefox | IE  | Opera | Safari | UC  | 360 speed | 360 safe browser |
+| ------ | :----: | :--: | :-----: | :-: | :---: | :----: | :-: | :-------: | :--------------: |
+| **G2** |   40   |  12  |   85    |  9  |  40   |   14   | 6.2 |    12     |       7.3        |
+
+### CDN
+
+The following JS is introduced in the HEAD, and each chart is mounted on the global G2.
+
+```ts
+<script src="https://unpkg.com/@babel/polyfill@latest"></script> // optional
+<script src="https://unpkg.com/@antv/g2@latest"></script>
+
+// chart.js
+var chart = new G2.Chart({
+   container: 'container',
+   autoFit: true,
+   height: 500,
+   padding: [50, 20, 50, 20]
+});
+```
+
+### NPM
+
+Use NPM mode, if there is a compatibility problem please use combination of Babel and `@Babel/polyfill`, reference G2 [.babelrc](https://github.com/antvis/G2/blob/master/.babelrc) and [webpack.config](https://github.com/antvis/G2/blob/master/webpack.config.js), More questions are welcome to join the DingTalk Group.

docs/manual/faq.zh.md

@@ -168,3 +168,32 @@ G2 4.0 支持的 legend marker 标记类型(symbol)有：`"circle" | "square" |
 
 - 🗑️ `triangleDown` 标记类型移除，变更为 `triangle-down`
 - 🗑️ `hollow-*` 等标记类型移除，可以通过设置 `style` 来达到空心的效果
+
+## 浏览器兼容性
+
+> 由于条件限制，版本下限仅供参考，并不意味着不能支持更低版本，该测试在 CDN 模式下测试完成，[在线 Demo](https://lxfu1.github.io/browser-compatibility-of-antv)。
+
+|        | Chrome | Edge | Firefox | IE  | Opera | Safari | UC  | 360 极速浏览器 | 360 安全浏览器 |
+| ------ | :----: | :--: | :-----: | :-: | :---: | :----: | :-: | :------------: | :------------: |
+| **G2** |   40   |  12  |   85    |  9  |  40   |   14   | 6.2 |       12       |      7.3       |
+
+### CDN 下使用
+
+head 里面引入如下 js , 各图表挂载全局 G2 上。
+
+```ts
+<script src="https://unpkg.com/@babel/polyfill@latest"></script> // 非必需
+<script src="https://unpkg.com/@antv/g2@latest"></script>
+
+// chart.js
+var chart = new G2.Chart({
+   container: 'container',
+   autoFit: true,
+   height: 500,
+   padding: [50, 20, 50, 20]
+});
+```
+
+### NPM
+
+使用 npm 模式，如果出现兼容性问题请结合 babel 和 @babel/polyfill 使用，参考 G2 [.babelrc](https://github.com/antvis/G2/blob/master/.babelrc) 和 [webpack.config](https://github.com/antvis/G2/blob/master/webpack.config.js)，更多问题欢迎进群交流。

package.json

@@ -57,10 +57,14 @@
   "devDependencies": {
     "@antv/data-set": "^0.11.2",
     "@antv/gatsby-theme-antv": "^1.0.4",
+    "@babel/core": "^7.13.1",
+    "@babel/preset-env": "^7.13.0",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-angular": "^8.2.0",
     "@types/jest": "^25.2.1",
+    "babel-loader": "^8.2.2",
     "conventional-changelog-cli": "^2.0.28",
+    "core-js": "^2.5.7",
     "gatsby": "^2.20.23",
     "generate-changelog": "^1.8.0",
     "gh-pages": "^2.1.1",

webpack.config.js

@@ -15,18 +15,23 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.ts$/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true,
+        test: /\.(js|ts)$/,
+        use: [
+          {
+            loader: 'babel-loader',
           },
-        },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
       },
     ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['.ts', '.js'],
   },
   plugins: [
     new webpack.NoEmitOnErrorsPlugin(),