add label demos

antvis · Nov 15, 2019 · fbe84a4 · fbe84a4
1 parent 2773f4f
commit fbe84a4
Show file tree

Hide file tree

Showing 16 changed files with 178 additions and 6 deletions.
diff --git a/examples/general/label/API.en.md b/examples/general/label/API.en.md
@@ -0,0 +1,13 @@
+---
+title: API
+---
+
+API.
+
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https:// ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http:// electron.atom.io/)
+
+| [src as img="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http:// godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE9, IE10, IE11, Edge                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                       |
diff --git a/examples/general/label/API.zh.md b/examples/general/label/API.zh.md
@@ -0,0 +1,13 @@
+---
+title: API
+---
+
+API 信息。
+
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https:// ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http:// electron.atom.io/)
+
+| [src as img="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http:// godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE9, IE10, IE11, Edge                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                       |
diff --git a/examples/general/label/demo/label-formatter.js b/examples/general/label/demo/label-formatter.js
@@ -0,0 +1,34 @@
+import { Line } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/salesTrend.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const linePlot = new Line(document.getElementById('container'), {
+      title: {
+        visible: true,
+        text: '图形标签文本格式化',
+      },
+      forceFit: true,
+      data,
+      padding: 'auto',
+      xField: 'date',
+      yField: 'buyin',
+      xAxis: {
+        visible: true,
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      yAxis: {
+        visible: true,
+      },
+      label: {
+        visible: true,
+        formatter: (val) => {
+          return val + '万';
+        },
+      },
+      responsive: true,
+    });
+
+    linePlot.render();
+  });
diff --git a/examples/general/label/demo/label-offset.js b/examples/general/label/demo/label-offset.js
@@ -0,0 +1,35 @@
+import { Line } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/salesTrend.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const linePlot = new Line(document.getElementById('container'), {
+      title: {
+        visible: true,
+        text: '图形标签文本偏移量',
+      },
+      forceFit: true,
+      data,
+      padding: 'auto',
+      xField: 'date',
+      yField: 'buyin',
+      xAxis: {
+        visible: true,
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      yAxis: {
+        visible: true,
+      },
+      label: {
+        visible: true,
+        offset: 20,
+        style: {
+          fill: '#0b53b0',
+        },
+      },
+      responsive: true,
+    });
+
+    linePlot.render();
+  });
diff --git a/examples/general/label/demo/label-style.js b/examples/general/label/demo/label-style.js
@@ -0,0 +1,34 @@
+import { Line } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/salesTrend.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const linePlot = new Line(document.getElementById('container'), {
+      title: {
+        visible: true,
+        text: '图形标签文本样式',
+      },
+      forceFit: true,
+      data,
+      padding: 'auto',
+      xField: 'date',
+      yField: 'buyin',
+      xAxis: {
+        visible: true,
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      yAxis: {
+        visible: true,
+      },
+      label: {
+        visible: true,
+        style: {
+          fill: '#0b53b0',
+        },
+      },
+      responsive: true,
+    });
+
+    linePlot.render();
+  });
diff --git a/examples/general/label/demo/meta.json b/examples/general/label/demo/meta.json
@@ -0,0 +1,23 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "label-formatter.js",
+      "title": "图形标签文本格式化",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*R6NWS4aNqPMAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "label-style.js",
+      "title": "图形标签文本样式",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*R6NWS4aNqPMAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "label-offset.js",
+      "title": "图形标签文本偏移量",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*R6NWS4aNqPMAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/general/label/design.en.md b/examples/general/label/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/general/label/design.zh.md b/examples/general/label/design.zh.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/general/label/index.en.md b/examples/general/label/index.en.md
@@ -0,0 +1,6 @@
+---
+title: Lable
+order: 3
+---
+
+Description about this component.
diff --git a/examples/general/label/index.zh.md b/examples/general/label/index.zh.md
@@ -0,0 +1,4 @@
+---
+title: 图形标签
+order: 3
+---
diff --git a/examples/general/padding/index.en.md b/examples/general/padding/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Set Padding
-order: 3
+order: 4
 ---
 
 Description about this component.
diff --git a/examples/general/padding/index.zh.md b/examples/general/padding/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 设置图表出血
-order: 3
+order: 4
 ---
diff --git a/examples/general/state/demo/set-active1.js b/examples/general/state/demo/set-active1.js
@@ -56,7 +56,7 @@ columnPlot.render();
 columnPlot.setActive(
   { name: 'year', exp: '1994' },
   {
-    fillStyle: '#C11008',
+    fillStyle: '#5AD8A6',
     fillOpacity: 0.8,
   }
 );
diff --git a/examples/general/state/demo/set-active2.js b/examples/general/state/demo/set-active2.js
@@ -61,7 +61,7 @@ columnPlot.setActive(
     },
   },
   {
-    fillStyle: '#C11008',
+    fillStyle: '#5AD8A6',
     fillOpacity: 0.8,
   }
 );
diff --git a/examples/general/state/index.en.md b/examples/general/state/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Set State
-order: 4
+order: 5
 ---
 
 Description about this component.
diff --git a/examples/general/state/index.zh.md b/examples/general/state/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 设置图表状态量
-order: 4
+order: 5
 ---