docs: add area graph demos (antvis#5897)

foolvip · Feb 27, 2024 · 879f867 · 879f867
1 parent a4b7a9f
commit 879f867
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 0 deletions.
diff --git a/site/examples/general/area/demo/area-basic.ts b/site/examples/general/area/demo/area-basic.ts
@@ -0,0 +1,32 @@
+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,
+});
+
+chart.data(data);
+
+chart
+  .area()
+  .encode('x', d => d.year)
+  .encode('y', 'value')
+  .encode('shape', 'area') // 'area', 'smooth', 'hvh', 'vh', 'hv'
+  .style('opacity', 0.2)
+  .axis('y', { labelFormatter: '~s', title: false });
+
+
+chart.line().encode('x', 'year').encode('y', 'value').encode('shape', 'line'); // 'line', 'smooth', 'vh', 'hv', 'hvh'
+
+chart.render();
diff --git a/site/examples/general/area/demo/area-percentage.ts b/site/examples/general/area/demo/area-percentage.ts
@@ -0,0 +1,50 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { country: 'Asia', year: '1750', value: 502 },
+  { country: 'Asia', year: '1800', value: 635 },
+  { country: 'Asia', year: '1850', value: 809 },
+  { country: 'Asia', year: '1900', value: 947 },
+  { country: 'Asia', year: '1950', value: 1402 },
+  { country: 'Asia', year: '1999', value: 3634 },
+  { country: 'Asia', year: '2050', value: 5268 },
+  { country: 'Africa', year: '1750', value: 106 },
+  { country: 'Africa', year: '1800', value: 107 },
+  { country: 'Africa', year: '1850', value: 111 },
+  { country: 'Africa', year: '1900', value: 133 },
+  { country: 'Africa', year: '1950', value: 221 },
+  { country: 'Africa', year: '1999', value: 767 },
+  { country: 'Africa', year: '2050', value: 1766 },
+  { country: 'Europe', year: '1750', value: 163 },
+  { country: 'Europe', year: '1800', value: 203 },
+  { country: 'Europe', year: '1850', value: 276 },
+  { country: 'Europe', year: '1900', value: 408 },
+  { country: 'Europe', year: '1950', value: 547 },
+  { country: 'Europe', year: '1999', value: 729 },
+  { country: 'Europe', year: '2050', value: 628 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .data(data)
+  .transform([{ type: 'stackY' }, { type: 'normalizeY' }])
+  .encode('x', 'year')
+  .encode('y', 'value')
+  .encode('color', 'country')
+  .axis('x', { title: false })
+  .axis('y', { title: false, labelFormatter: '.0%' })
+
+chart
+  .area()
+  .tooltip({ channel: 'y0', valueFormatter: '.0%' })
+  .style('fillOpacity', 0.3)
+
+chart
+  .line()
+  .tooltip(false);
+
+chart.render();
diff --git a/site/examples/general/area/demo/area-range.ts b/site/examples/general/area/demo/area-range.ts
@@ -0,0 +1,124 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { time: 1246406400000, temperature: [14.3, 27.7] },
+  { time: 1246492800000, temperature: [14.5, 27.8] },
+  { time: 1246579200000, temperature: [15.5, 29.6] },
+  { time: 1246665600000, temperature: [16.7, 30.7] },
+  { time: 1246752000000, temperature: [16.5, 25.0] },
+  { time: 1246838400000, temperature: [17.8, 25.7] },
+  { time: 1246924800000, temperature: [13.5, 24.8] },
+  { time: 1247011200000, temperature: [10.5, 21.4] },
+  { time: 1247097600000, temperature: [9.2, 23.8] },
+  { time: 1247184000000, temperature: [11.6, 21.8] },
+  { time: 1247270400000, temperature: [10.7, 23.7] },
+  { time: 1247356800000, temperature: [11.0, 23.3] },
+  { time: 1247443200000, temperature: [11.6, 23.7] },
+  { time: 1247529600000, temperature: [11.8, 20.7] },
+  { time: 1247616000000, temperature: [12.6, 22.4] },
+  { time: 1247702400000, temperature: [13.6, 19.6] },
+  { time: 1247788800000, temperature: [11.4, 22.6] },
+  { time: 1247875200000, temperature: [13.2, 25.0] },
+  { time: 1247961600000, temperature: [14.2, 21.6] },
+  { time: 1248048000000, temperature: [13.1, 17.1] },
+  { time: 1248134400000, temperature: [12.2, 15.5] },
+  { time: 1248220800000, temperature: [12.0, 20.8] },
+  { time: 1248307200000, temperature: [12.0, 17.1] },
+  { time: 1248393600000, temperature: [12.7, 18.3] },
+  { time: 1248480000000, temperature: [12.4, 19.4] },
+  { time: 1248566400000, temperature: [12.6, 19.9] },
+  { time: 1248652800000, temperature: [11.9, 20.2] },
+  { time: 1248739200000, temperature: [11.0, 19.3] },
+  { time: 1248825600000, temperature: [10.8, 17.8] },
+  { time: 1248912000000, temperature: [11.8, 18.5] },
+  { time: 1248998400000, temperature: [10.8, 16.1] },
+];
+
+const averages = [
+  { time: 1246406400000, temperature: 21.5 },
+  { time: 1246492800000, temperature: 22.1 },
+  { time: 1246579200000, temperature: 23 },
+  { time: 1246665600000, temperature: 23.8 },
+  { time: 1246752000000, temperature: 21.4 },
+  { time: 1246838400000, temperature: 21.3 },
+  { time: 1246924800000, temperature: 18.3 },
+  { time: 1247011200000, temperature: 15.4 },
+  { time: 1247097600000, temperature: 16.4 },
+  { time: 1247184000000, temperature: 17.7 },
+  { time: 1247270400000, temperature: 17.5 },
+  { time: 1247356800000, temperature: 17.6 },
+  { time: 1247443200000, temperature: 17.7 },
+  { time: 1247529600000, temperature: 16.8 },
+  { time: 1247616000000, temperature: 17.7 },
+  { time: 1247702400000, temperature: 16.3 },
+  { time: 1247788800000, temperature: 17.8 },
+  { time: 1247875200000, temperature: 18.1 },
+  { time: 1247961600000, temperature: 17.2 },
+  { time: 1248048000000, temperature: 14.4 },
+  { time: 1248134400000, temperature: 13.7 },
+  { time: 1248220800000, temperature: 15.7 },
+  { time: 1248307200000, temperature: 14.6 },
+  { time: 1248393600000, temperature: 15.3 },
+  { time: 1248480000000, temperature: 15.3 },
+  { time: 1248566400000, temperature: 15.8 },
+  { time: 1248652800000, temperature: 15.2 },
+  { time: 1248739200000, temperature: 14.8 },
+  { time: 1248825600000, temperature: 14.4 },
+  { time: 1248912000000, temperature: 15 },
+  { time: 1248998400000, temperature: 13.6 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .data({
+    value: data,
+    transform: [{
+      type: 'map',
+      callback: (d) => ({
+        time: d.time,
+        low: d.temperature[0],
+        high: d.temperature[1]
+      }),
+    }]
+  })
+  .axis('y', { title: false })
+
+chart
+  .area()
+  .encode('x', d => new Date(d.time).toLocaleDateString())
+  .encode('y', ['low', 'high'])
+  .encode('shape', 'area')
+  .style('fillOpacity', 0.3)
+  .style('fill', '#64b5f6')
+  .tooltip({
+    items: [d => ({ name: '温度区间',  value: `${d.low}-${d.high}` })],
+  })
+
+chart
+  .line()
+  .data(averages)
+  .encode('x', d => new Date(d.time).toLocaleDateString())
+  .encode('y', 'temperature')
+  .encode('shape', 'line')
+  .style('lineWidth', 2)
+  .tooltip({
+    title: false,
+    items: [d => ({
+      name: '平均温度',
+      value: d.temperature
+    })]
+  })
+chart
+  .point()
+  .data(averages)
+  .encode('x', d => new Date(d.time).toLocaleDateString())
+  .encode('y', 'temperature')
+  .encode('shape', 'point')
+  .encode('size', 4)
+  .tooltip(false)
+
+chart.render();
diff --git a/site/examples/general/area/demo/area-stacked-basic.ts b/site/examples/general/area/demo/area-stacked-basic.ts
@@ -0,0 +1,51 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { country: 'Asia', year: '1750', value: 502 },
+  { country: 'Asia', year: '1800', value: 635 },
+  { country: 'Asia', year: '1850', value: 809 },
+  { country: 'Asia', year: '1900', value: 5268 },
+  { country: 'Asia', year: '1950', value: 4400 },
+  { country: 'Asia', year: '1999', value: 3634 },
+  { country: 'Asia', year: '2050', value: 947 },
+  { country: 'Africa', year: '1750', value: 106 },
+  { country: 'Africa', year: '1800', value: 107 },
+  { country: 'Africa', year: '1850', value: 111 },
+  { country: 'Africa', year: '1900', value: 1766 },
+  { country: 'Africa', year: '1950', value: 221 },
+  { country: 'Africa', year: '1999', value: 767 },
+  { country: 'Africa', year: '2050', value: 133 },
+  { country: 'Europe', year: '1750', value: 163 },
+  { country: 'Europe', year: '1800', value: 203 },
+  { country: 'Europe', year: '1850', value: 276 },
+  { country: 'Europe', year: '1900', value: 628 },
+  { country: 'Europe', year: '1950', value: 547 },
+  { country: 'Europe', year: '1999', value: 729 },
+  { country: 'Europe', year: '2050', value: 408 },
+  { country: 'Oceania', year: '1750', value: 200 },
+  { country: 'Oceania', year: '1800', value: 200 },
+  { country: 'Oceania', year: '1850', value: 200 },
+  { country: 'Oceania', year: '1900', value: 460 },
+  { country: 'Oceania', year: '1950', value: 230 },
+  { country: 'Oceania', year: '1999', value: 300 },
+  { country: 'Oceania', year: '2050', value: 300 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .data(data)
+  .encode('x', 'year')
+  .encode('y', 'value')
+  .encode('color', 'country')
+  .axis('x', { title: false })
+  .axis('y', { title: false });
+
+chart.area().style('fillOpacity', 0.3);
+
+chart.line().style('strokeWidth', 2).tooltip(false);
+
+chart.render();
diff --git a/site/examples/general/area/demo/area-with-negative.ts b/site/examples/general/area/demo/area-with-negative.ts
@@ -0,0 +1,50 @@
+
+import { Chart } from '@antv/g2';
+
+const data = [
+  { year: '1996', north: 322, south: 162 },
+  { year: '1997', north: 324, south: 90 },
+  { year: '1998', north: 329, south: 50 },
+  { year: '1999', north: 342, south: 77 },
+  { year: '2000', north: 348, south: 35 },
+  { year: '2001', north: 334, south: -45 },
+  { year: '2002', north: 325, south: -88 },
+  { year: '2003', north: 316, south: -120 },
+  { year: '2004', north: 318, south: -156 },
+  { year: '2005', north: 330, south: -123 },
+  { year: '2006', north: 355, south: -88 },
+  { year: '2007', north: 366, south: -66 },
+  { year: '2008', north: 337, south: -45 },
+  { year: '2009', north: 352, south: -29 },
+  { year: '2010', north: 377, south: -45 },
+  { year: '2011', north: 383, south: -88 },
+  { year: '2012', north: 344, south: -132 },
+  { year: '2013', north: 366, south: -146 },
+  { year: '2014', north: 389, south: -169 },
+  { year: '2015', north: 334, south: -184 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .data({
+    value: data,
+    transform: [{
+      type: 'fold',
+      fields: ['north', 'south'],
+      key: 'type', // key字段
+      value: 'value', // value字段
+    }]
+  })
+  .encode('x', d =>  d.year)
+  .encode('y', 'value')
+  .encode('color', 'type')
+
+chart.area().style('fillOpacity', 0.3)
+
+chart.line().style('strokeWidth', 2).tooltip(false);
+
+chart.render();
diff --git a/site/examples/general/area/demo/meta.json b/site/examples/general/area/demo/meta.json
@@ -4,6 +4,14 @@
     "en": "Category"
   },
   "demos": [
+    {
+      "filename": "area-basic.ts",
+      "title": {
+        "zh": "简单面积图",
+        "en": "Basic Area Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*MfcyRp9k47gAAAAAAAAAAABkARQnAQ/original"
+    },
     {
       "filename": "step-area.ts",
       "title": {
@@ -28,6 +36,30 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ox-rS7bQE48AAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "area-with-negative.ts",
+      "title": {
+        "zh": "负数面积图",
+        "en": "With Negative Area Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rYTxSZm8qysAAAAAAAAAAABkARQnAQ/original"
+    },
+    {
+      "filename": "area-stacked-basic.ts",
+      "title": {
+        "zh": "简单堆叠面积图",
+        "en": "Basic Stacked Area Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lYP2RaWaXTgAAAAAAAAAAABkARQnAQ/original"
+    },
+    {
+      "filename": "area-percentage.ts",
+      "title": {
+        "zh": "百分比堆叠面积图",
+        "en": "Percentage Area Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*anNrQbpzkysAAAAAAAAAAABkARQnAQ/original"
+    },
     {
       "filename": "area-gradient.ts",
       "title": {
@@ -100,6 +132,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2fXdTp9E-uwAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "area-range.ts",
+      "title": {
+        "zh": "区间面积图",
+        "en": "Range Area Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oBRKR4tAIEcAAAAAAAAAAABkARQnAQ/original"
+    },
     {
       "filename": "range-spline-area.ts",
       "title": {