docs: add faqs of 23 ~ 32

VisActor · Oct 26, 2023 · 1ef9676 · 1ef9676
1 parent dd60436
commit 1ef9676
Show file tree

Hide file tree

Showing 49 changed files with 3,538 additions and 0 deletions.
diff --git a/docs/assets/faq/en/23-How to configure gradient colors for area charts.md b/docs/assets/faq/en/23-How to configure gradient colors for area charts.md
@@ -0,0 +1,225 @@
+# How to configure gradient colors for area charts? Can stacked area charts support gradient colors with different gradient directions?
+
+## Question Description
+
+For an area chart similar to [https://www.visactor.io/vchart/demo/area-chart/percentage-stacked-area](https://www.visactor.io/vchart/demo/area-chart/percentage-stacked-area), how can I achieve a gradient effect? Is it possible to configure different gradient directions?
+
+![area chart](/vchart/faq/23-0.png)
+
+## Solution
+
+The solutions for different chart libraries vary. Based on the demo you provided, in VChart , you only need to configure `area.style.fill` as a gradient color and change the values of x0, y0, x1, and y1 to change the direction of the gradient.
+
+![code](/vchart/faq/23-1.png)
+
+## Code Example
+
+```
+const spec = {
+  type: 'area',
+  data: {
+    values: [
+      { type: 'Nail polish', country: 'Africa', value: 4229 },
+      { type: 'Nail polish', country: 'EU', value: 4376 },
+      { type: 'Nail polish', country: 'China', value: 3054 },
+      { type: 'Nail polish', country: 'USA', value: 12814 },
+      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+      { type: 'Rouge', country: 'Africa', value: 5221 },
+      { type: 'Rouge', country: 'EU', value: 3574 },
+      { type: 'Rouge', country: 'China', value: 7004 },
+      { type: 'Rouge', country: 'USA', value: 11624 },
+      { type: 'Lipstick', country: 'Africa', value: 9256 },
+      { type: 'Lipstick', country: 'EU', value: 4376 },
+      { type: 'Lipstick', country: 'China', value: 9054 },
+      { type: 'Lipstick', country: 'USA', value: 8814 },
+      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+      { type: 'Eyeshadows', country: 'EU', value: 4572 },
+      { type: 'Eyeshadows', country: 'China', value: 12043 },
+      { type: 'Eyeshadows', country: 'USA', value: 12998 },
+      { type: 'Eyeliner', country: 'Africa', value: 5432 },
+      { type: 'Eyeliner', country: 'EU', value: 3417 },
+      { type: 'Eyeliner', country: 'China', value: 15067 },
+      { type: 'Eyeliner', country: 'USA', value: 12321 },
+      { type: 'Foundation', country: 'Africa', value: 13701 },
+      { type: 'Foundation', country: 'EU', value: 5231 },
+      { type: 'Foundation', country: 'China', value: 10119 },
+      { type: 'Foundation', country: 'USA', value: 10342 },
+      { type: 'Lip gloss', country: 'Africa', value: 4008 },
+      { type: 'Lip gloss', country: 'EU', value: 4572 },
+      { type: 'Lip gloss', country: 'China', value: 12043 },
+      { type: 'Lip gloss', country: 'USA', value: 22998 },
+      { type: 'Mascara', country: 'Africa', value: 18712 },
+      { type: 'Mascara', country: 'EU', value: 6134 },
+      { type: 'Mascara', country: 'China', value: 10419 },
+      { type: 'Mascara', country: 'USA', value: 11261 }
+    ]
+  },
+  title: {
+    visible: true,
+    text: '100% stacked area chart of cosmetic products sales'
+  },
+  percent: true,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+  axes: [
+    {
+      orient: 'left',
+      label: {
+        formatMethod(val) {
+          return `${(val * 100).toFixed(2)}%`;
+        }
+      }
+    }
+  ],
+  area: {
+    style: {
+      fill: {
+        gradient: 'linear',
+        x0: 0.5,
+        y0: 0,
+        x1: 0.5,
+        y1: 1,
+        stops: [
+          {
+            offset: 0,
+            opacity: 1
+          },
+          {
+            color: 'black',
+            offset: 1,
+            opacity: 0.3
+          }
+        ]
+      }
+    }
+  }
+};
+```
+
+## Results
+
+[Online demo](https://codesandbox.io/s/area-chart-linear-gradient-xhdmc7)
+
+```javascript livedemo
+const spec = {
+  type: 'area',
+  data: {
+    values: [
+      { type: 'Nail polish', country: 'Africa', value: 4229 },
+      { type: 'Nail polish', country: 'EU', value: 4376 },
+      { type: 'Nail polish', country: 'China', value: 3054 },
+      { type: 'Nail polish', country: 'USA', value: 12814 },
+      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
+      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
+      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
+      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
+      { type: 'Rouge', country: 'Africa', value: 5221 },
+      { type: 'Rouge', country: 'EU', value: 3574 },
+      { type: 'Rouge', country: 'China', value: 7004 },
+      { type: 'Rouge', country: 'USA', value: 11624 },
+      { type: 'Lipstick', country: 'Africa', value: 9256 },
+      { type: 'Lipstick', country: 'EU', value: 4376 },
+      { type: 'Lipstick', country: 'China', value: 9054 },
+      { type: 'Lipstick', country: 'USA', value: 8814 },
+      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
+      { type: 'Eyeshadows', country: 'EU', value: 4572 },
+      { type: 'Eyeshadows', country: 'China', value: 12043 },
+      { type: 'Eyeshadows', country: 'USA', value: 12998 },
+      { type: 'Eyeliner', country: 'Africa', value: 5432 },
+      { type: 'Eyeliner', country: 'EU', value: 3417 },
+      { type: 'Eyeliner', country: 'China', value: 15067 },
+      { type: 'Eyeliner', country: 'USA', value: 12321 },
+      { type: 'Foundation', country: 'Africa', value: 13701 },
+      { type: 'Foundation', country: 'EU', value: 5231 },
+      { type: 'Foundation', country: 'China', value: 10119 },
+      { type: 'Foundation', country: 'USA', value: 10342 },
+      { type: 'Lip gloss', country: 'Africa', value: 4008 },
+      { type: 'Lip gloss', country: 'EU', value: 4572 },
+      { type: 'Lip gloss', country: 'China', value: 12043 },
+      { type: 'Lip gloss', country: 'USA', value: 22998 },
+      { type: 'Mascara', country: 'Africa', value: 18712 },
+      { type: 'Mascara', country: 'EU', value: 6134 },
+      { type: 'Mascara', country: 'China', value: 10419 },
+      { type: 'Mascara', country: 'USA', value: 11261 }
+    ]
+  },
+  title: {
+    visible: true,
+    text: '100% stacked area chart of cosmetic products sales'
+  },
+  percent: true,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
+  axes: [
+    {
+      orient: 'left',
+      label: {
+        formatMethod(val) {
+          return `${(val * 100).toFixed(2)}%`;
+        }
+      }
+    }
+  ],
+  area: {
+    style: {
+      fill: {
+        gradient: 'linear',
+        x0: 0.5,
+        y0: 0,
+        x1: 0.5,
+        y1: 1,
+        stops: [
+          {
+            offset: 0,
+            opacity: 1
+          },
+          {
+            color: 'black',
+            offset: 1,
+            opacity: 0.3
+          }
+        ]
+      }
+    }
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+```
+
+## About gradient color configuration
+
+From the above API, it can be seen that the gradient colors in VChart are consistent with the gradient color API in canvas and can better support various gradient requirements. You can understand the rules of gradient color rendering from the following diagram
+
+![gradient](/vchart/faq/23-3.png)
+
+### Start and end points
+
+There are 2 sets of position information in the parameters, and the diagram above shows the meaning of the start and end points in gradient color rendering.
+
+- Start point: (x0, y0)
+- End point: (x1, y1)
+
+**Note**: In VChart, the configuration of start and end points is slightly different from canvas. In canvas, positions are points in the canvas. In chartSpace, positions are proportional positions within the range of [0, 1] from the top left corner to the bottom right corner of the chart element. Please refer to the following diagram for specific details：
+
+![gradient](/vchart/faq/23-4.png)
+
+### Gradient stops
+
+This part is no different from the canvas API. Each stage needs to be configured with an offset and a color. Multiple stages can be configured.
+
+## Related Documentation
+
+- [Stacked Area Chart Demo](https://www.visactor.io/vchart/demo/area-chart/percentage-stacked-area)
+- [Area Chart Tutorial](https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Types/Area)
+- [Related option](https://www.visactor.io/vchart/option/areaChart#area.style.fill)
+- [github](https://github.com/VisActor/VChart)
+- [Canvas Gradient api](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient)
diff --git a/...truncate, wrap, or perform other formatting effects on axis labels in charts.md b/...truncate, wrap, or perform other formatting effects on axis labels in charts.md
@@ -0,0 +1,139 @@
+# How to truncate, wrap, or perform other formatting effects on axis labels in charts?
+
+## Question Description
+
+How to achieve line breaks or truncation effects for axis labels in bar charts similar to [this example](https://www.visactor.io/vchart/demo/bar-chart/basic-bar) when the labels are very long?
+
+![bar chart](/vchart/faq/24-0.png)
+
+## Solution
+
+The solutions vary among different chart libraries. Based on the demo you provided, in VChart, you only need to configure the label-related settings in the axes section:
+
+- By returning an array through the `formatMethod`, you can achieve custom line breaks.
+- By using `style.maxLineWidth`, you can achieve automatic truncation.
+- By setting `style.ellipsis`, you can set the ellipsis.
+
+![code](/vchart/faq/24-1.png)
+
+## Code Example
+
+```
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          name: 'Apple https://www.apple.com/',
+          value: 214480
+        },
+        {
+          name: 'Google https://www.google.com.hk/',
+          value: 155506
+        },
+        {
+          name: 'Amazon https://www.amazon.com/',
+          value: 100764
+        },
+        {
+          name: 'Microsoft https://www.microsoft.com/',
+          value: 92715
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'name',
+  axes: [
+    {
+      orient: 'bottom',
+      visible: false
+    },
+    {
+      orient: 'left',
+      label: {
+        formatMethod: (text, datum) => {
+          return text.split(' ');
+        },
+        style: {
+          maxLineWidth: 100,
+          ellipsis: '~'
+        }
+      }
+    }
+  ],
+  label: {
+    visible: true
+  }
+};
+```
+
+## Results
+
+[Online demo](https://codesandbox.io/s/axis-label-auto-limit-pnsvzl)
+
+```javascript livedemo
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          name: 'Apple https://www.apple.com/',
+          value: 214480
+        },
+        {
+          name: 'Google https://www.google.com.hk/',
+          value: 155506
+        },
+        {
+          name: 'Amazon https://www.amazon.com/',
+          value: 100764
+        },
+        {
+          name: 'Microsoft https://www.microsoft.com/',
+          value: 92715
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'name',
+  axes: [
+    {
+      orient: 'bottom',
+      visible: false
+    },
+    {
+      orient: 'left',
+      label: {
+        formatMethod: (text, datum) => {
+          return text.split(' ');
+        },
+        style: {
+          maxLineWidth: 100,
+          ellipsis: '~'
+        }
+      }
+    }
+  ],
+  label: {
+    visible: true
+  }
+};
+
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderAsync();
+```
+
+## Related Documentation
+
+- [Axis Demo](https://www.visactor.io/vchart/demo/axis/animation)
+- [Axis Tutorial](https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes)
+- [Related option](https://www.visactor.io/vchart/option/barChart#axes-band.label.style.ellipsis)
+- [github](https://github.com/VisActor/VChart)