docs: support dynamic texture docs

VisActor · Feb 27, 2025 · 39910ed · 39910ed
1 parent 32aafb9
commit 39910ed
Show file tree

Hide file tree

Showing 5 changed files with 594 additions and 1 deletion.
diff --git a/docs/assets/examples/en/storytelling/dynamic-texture-bar.md b/docs/assets/examples/en/storytelling/dynamic-texture-bar.md
@@ -0,0 +1,172 @@
+---
+category: examples
+group: storytelling
+title: dynamic texture for bar
+keywords: animation,morphing,bar,barChart,dynamic-texture,comparison
+order: 42-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/morph-bar-to-pie.gif
+option: barChart#dynamicTexture
+---
+
+# Dynamic Texture Effects for Bar Charts
+
+Dynamic texture is a special effect that can add dynamic texture effects to the bars of a bar chart, enhancing the visualization.
+
+## Key Configuration
+- `textureOptions.dynamicTexture`: A function for the dynamic texture effect that is called after drawing each cell.
+- `textureOptions.beforeDynamicTexture`: A function for the dynamic texture effect that is called before drawing each cell.
+- `textureOptions.useNewCanvas`: Try enabling this option when performance is poor.
+- `texture`: The shape of the dynamic texture, which should be consistent with the symbolType of the symbol graphic, and can accept a custom path.
+- `textureSize`: The size of the dynamic texture.
+- `texturePadding`: The spacing of the dynamic texture.
+- `textureRatio`: The position of the dynamic texture in the current frame, within the range of [0,1].
+
+## Key Configuration
+
+## Code Demonstration
+
+```javascript livedemo
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          State: 'WY',
+          Age: 'Under 5 Years',
+          Population: 25635
+        },
+        {
+          State: 'WY',
+          Age: '5 to 13 Years',
+          Population: 1890
+        },
+        {
+          State: 'WY',
+          Age: '14 to 17 Years',
+          Population: 9314
+        },
+        {
+          State: 'DC',
+          Age: 'Under 5 Years',
+          Population: 30352
+        },
+        {
+          State: 'DC',
+          Age: '5 to 13 Years',
+          Population: 20439
+        },
+        {
+          State: 'DC',
+          Age: '14 to 17 Years',
+          Population: 10225
+        },
+        {
+          State: 'VT',
+          Age: 'Under 5 Years',
+          Population: 38253
+        },
+        {
+          State: 'VT',
+          Age: '5 to 13 Years',
+          Population: 42538
+        },
+        {
+          State: 'VT',
+          Age: '14 to 17 Years',
+          Population: 15757
+        },
+        {
+          State: 'ND',
+          Age: 'Under 5 Years',
+          Population: 51896
+        },
+        {
+          State: 'ND',
+          Age: '5 to 13 Years',
+          Population: 67358
+        },
+        {
+          State: 'ND',
+          Age: '14 to 17 Years',
+          Population: 18794
+        },
+        {
+          State: 'AK',
+          Age: 'Under 5 Years',
+          Population: 72083
+        },
+        {
+          State: 'AK',
+          Age: '5 to 13 Years',
+          Population: 85640
+        },
+        {
+          State: 'AK',
+          Age: '14 to 17 Years',
+          Population: 22153
+        }
+      ]
+    }
+  ],
+  xField: 'State',
+  yField: 'Population',
+  seriesField: 'Age',
+  percent: true,
+  stack: true,
+  axes: [{ orient: 'bottom', bandPadding: 0 }],
+  bar: {
+    style: {
+      texture: 'square',
+      textureSize: 10,
+      texturePadding: 1,
+      textureRatio: 0,
+      textureColor: 'orange',
+      textureOptions: datum => {
+        console.log(datum);
+        const func =
+          datum.Age === 'Under 5 Years'
+            ? (ctx, row, column, rowCount, columnCount, ratio, graphic) =>
+                VRender.randomOpacity(ctx, row, column, rowCount, columnCount, ratio, graphic, 0.3)
+            : datum.Age === '5 to 13 Years'
+            ? (ctx, row, column, rowCount, columnCount, ratio, graphic) =>
+                VRender.columnLeftToRight(ctx, row, column, rowCount, columnCount, ratio, graphic)
+            : (ctx, row, column, rowCount, columnCount, ratio, graphic) =>
+                VRender.columnRightToLeft(ctx, row, column, rowCount, columnCount, ratio, graphic);
+        return {
+          dynamicTexture: (ctx, row, column, rowCount, columnCount, ratio, graphic) => {
+            const _r = func(ctx, row, column, rowCount, columnCount, ratio, graphic);
+            ctx.globalAlpha = _r;
+            const i = row * columnCount + column;
+            ctx.fillStyle =
+              datum.Age === 'Under 5 Years' ? 'red' : datum.Age === '5 to 13 Years' ? 'blue' : 'green';
+            ctx.fill();
+          }
+        };
+      }
+    }
+  },
+  animationAppear: {
+    bar: {
+      channel: {
+        textureRatio: {
+          from: 0,
+          to: 1
+        }
+      },
+      easing: 'linear',
+      duration: 3000,
+      loop: true
+    }
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+
+vchart.renderSync();
+```
+
+## 相关教程
+
+[进度图](link)
diff --git a/docs/assets/examples/en/storytelling/dynamic-texture-progress.md b/docs/assets/examples/en/storytelling/dynamic-texture-progress.md
@@ -0,0 +1,118 @@
+---
+category: examples
+group: storytelling
+title: dynamic texture for progress
+keywords: animation,morphing,linearProgress,dynamic-texture,comparison
+order: 42-0
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/morph-bar-to-pie.gif
+option: linearProgress#dynamicTexture
+---
+
+# Dynamic Texture Effects for Progress Charts
+
+Dynamic texture is a special effect that adds dynamic texture effects to the progress bar of a progress chart, enhancing the visual experience.
+## Key Configurations
+- `textureOptions.dynamicTexture`: A function for the dynamic texture effect, called after drawing each cell.
+- `textureOptions.beforeDynamicTexture`: A function for the dynamic texture effect, called before drawing each cell.
+- `textureOptions.useNewCanvas`: Try enabling this option when performance is poor.
+- `texture`: The shape of the dynamic texture, which should match the `symbolType` of the symbol graphic, and can accept a custom path.
+- `textureSize`: The size of the dynamic texture.
+- `texturePadding`: The spacing of the dynamic texture.
+- `textureRatio`: The position of the dynamic texture in the current frame, within the range of [0,1].
+
+## Key Configurations
+
+## Code Demonstration
+
+```javascript livedemo
+const path =
+      'M 8.25 -11 L 11 -11 V -8.25 L -8.25 11 H -11 V 8.25 L 8.25 -11 Z M -11 -11 H -8.3789 L -11 -8.2539 V -11 Z M 11 11 H 8.3789 L 11 8.2539 V 11 Z';
+const spec = {
+  type: 'linearProgress',
+  data: [
+    {
+      id: 'id0',
+      values: [
+        {
+          type: 'Tradition Industries',
+          value: 0.795,
+          text: '79.5%'
+        },
+        {
+          type: 'Business Companies',
+          value: 0.25,
+          text: '25%'
+        },
+        {
+          type: 'Customer-facing Companies',
+          value: 0.065,
+          text: '6.5%'
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'type',
+  seriesField: 'type',
+  progress: {
+    style: {
+      texture: path,
+      textureSize: 30,
+      texturePadding: 0,
+      textureRatio: 1,
+      textureColor: 'orange',
+      textureOptions: datum => {
+        return {
+          beforeDynamicTexture: (ctx, row, column, rowCount, columnCount, ratio, graphic) => {
+            const dx = ratio - 0.5;
+            const size = 30;
+            ctx.translate(dx * size, 0);
+          },
+          dynamicTexture: (ctx, row, column, rowCount, columnCount, ratio, graphic) => {
+            const dx = ratio - 0.5;
+            const size = 30;
+            ctx.translate(-dx * size, 0);
+            ctx.fillStyle = 'white';
+            ctx.globalAlpha = 0.6;
+            ctx.fill();
+          }
+        };
+      }
+    }
+  },
+  animationAppear: {
+    progress: {
+      channel: {
+        textureRatio: {
+          from: 0,
+          to: 1
+        }
+      },
+      easing: 'linear',
+      duration: 3000,
+      loop: true
+    }
+  },
+  cornerRadius: 20,
+  bandWidth: 30,
+  axes: [
+    {
+      orient: 'left',
+      label: { visible: true },
+      type: 'band',
+      domainLine: { visible: false },
+      tick: { visible: false }
+    },
+    { orient: 'bottom', label: { visible: true }, type: 'linear', visible: false }
+  ]
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+
+vchart.renderSync();
+```
+
+## 相关教程
+
+[进度图](link)
diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json
@@ -126,6 +126,20 @@
             "zh": "柱状图、散点图间切换的全局动画",
             "en": "Global animation for switching between bar charts and scatter plots"
           }
+        },
+        {
+          "path": "dynamic-texture-progress",
+          "title": {
+            "zh": "进度图的动态纹理",
+            "en": "Dynamic texture for progress chart"
+          }
+        },
+        {
+          "path": "dynamic-texture-bar",
+          "title": {
+            "zh": "柱状图的动态纹理",
+            "en": "Dynamic texture for bar chart"
+          }
         }
       ]
     },
@@ -3137,4 +3151,4 @@
       ]
     }
   ]
-}
+}