diff --git a/docs/assets/tutorials/en/animation/advanced-animation.md b/docs/assets/tutorials/en/animation/advanced-animation.md index 240961c610..94399424ef 100644 --- a/docs/assets/tutorials/en/animation/advanced-animation.md +++ b/docs/assets/tutorials/en/animation/advanced-animation.md @@ -102,7 +102,7 @@ const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync(); ``` -In the above example, we are using the `duration`/`delay`/`easing`/`oneByOne` configuration introduced in our previous chapter ([Animation Types](./Animation_Types)) to achieve simple animation effects. +In the above example, we are using the `duration`/`delay`/`easing`/`oneByOne` configuration introduced in our previous chapter ([Animation Types](./defination-of-animtion)) to achieve simple animation effects. The animation configuration for graphic elements supports multiple properties for detailed control of the animation behavior. Here are the supported attributes for the graphic animation configuration: @@ -594,4 +594,89 @@ VChart provides animation arrangement configuration based on JSON spec to meet a A timeline represents the animation performance of a graphic element over a specific period of time. A timeline contains a set of serialized animation fragments (TimeSlice). The timeline describes the animation performance of a graphic element over a period of time. Animations in different timelines can be executed in parallel. The timeline can also be set with `loop: true` to loop the configured animation effects. -![Timeline schematic diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca +![Timeline schematic diagram](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/23e5d313c2c3a66d4ca) + +### Timeslice + +In a timeline, each time slice is executed serially, and the constituent elements in a time slice include: +- `effect`: The specific execution effect of the animation, which describes the specific interpolation calculation logic of the visual channel attributes of the primitive. Effects can be encapsulated specific animation effects, or animation configurations configured by developers to start and end states, and describe the calculation logic of animation attribute interpolation. Each timeSlice can be configured with multiple `effect`; +- `duration`: the execution duration of animation slices; +- `delay`: the waiting time before the execution of the animation slice; + +### Animation Effect (Effect) +The constituent elements in animation effects (Effect) include: +- `channel`: the changed visual channel attribute, which describes the visual channel attribute when the interpolation calculation starts and ends; +- `easing`: easing strategy for difference calculation; + +The following example achieves an accordion effect by animating a looping timeline: +```javascript livedemo +const spec = { + type: 'bar', + data: [ + { + id: 'id0', + values: [ + { x: '1', y: 22 }, + { x: '2', y: 43 }, + { x: '3', y: 33 }, + { x: '4', y: 22 }, + { x: '5', y: 10 }, + { x: '6', y: 30 }, + { x: '7', y: 46 }, + { x: '8', y: 21 }, + { x: '9', y: 33 }, + { x: '10', y: 43 }, + { x: '11', y: 42 }, + { x: '12', y: 30 }, + { x: '13', y: 9 }, + { x: '14', y: 46 } + ] + } + ], + xField: ['x'], + yField: 'y', + axes: [ + { orient: 'bottom', type: 'band' }, + { orientation: 'left', type: 'linear' } + ], + animationNormal: { + bar: [ + { + loop: true, + startTime: 100, + oneByOne: 100, + timeSlices: [ + { + delay: 1000, + effects: { + channel: { + fillOpacity: { to: 0.5 } + }, + easing: 'linear' + }, + duration: 500 + }, + { + effects: { + channel: { + fillOpacity: { to: 1 } + }, + easing: 'linear' + }, + duration: 500 + } + ] + } + ] + } +}; + +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderAsync(); +``` + +## Custom animation +In the animation effect (Effect), if the simple `channel` configuration cannot meet your needs, you can configure custom animation effects through `custom` and `customParameters`: +- `custom`: custom animation; +- `customParameters`: Custom animation parameters; +For detailed usage, please refer to the [Custom Animation](../custom-extension/custom-animation) chapter. \ No newline at end of file diff --git a/docs/assets/tutorials/en/animation/how-to-config-animation.md b/docs/assets/tutorials/en/animation/how-to-config-animation.md index 4111260144..0558196d0c 100644 --- a/docs/assets/tutorials/en/animation/how-to-config-animation.md +++ b/docs/assets/tutorials/en/animation/how-to-config-animation.md @@ -63,7 +63,7 @@ window['vchart'] = vchart; ### Animation Easing Effect -Easing effects describe the process of "acceleration" of the animation. Setting the appropriate easing effect can make the chart animation more dynamic. VChart has many built-in easing effect types that can be selected through the `animation.easing` property. The default value is `cubicOut`. The following built-in easing effect types are available, and you can refer to the [easing demo](../../../demo/combination/easing-visualization) for more information. +Easing effects describe the process of "acceleration" of the animation. Setting the appropriate easing effect can make the chart animation more dynamic. VChart has many built-in easing effect types that can be selected through the `animation.easing` property. The default value is `cubicOut`. The following built-in easing effect types are available, and you can refer to the [easing demo](../../demo/combination/easing-visualization) for more information. - linear - quadIn diff --git a/docs/assets/tutorials/en/chart/3d-area.md b/docs/assets/tutorials/en/chart/3d-area.md index 2bb37dec1e..b9ba991bdc 100644 --- a/docs/assets/tutorials/en/chart/3d-area.md +++ b/docs/assets/tutorials/en/chart/3d-area.md @@ -21,9 +21,9 @@ Point elements and line elements are the basic components of an area chart, and Axes, tooltips, and other components that assist in chart display are optional configurations with default effects and functions: -- `areaChart.axes`: Axis component, default is to display and automatically infer the coordinate system and data mapping logic according to the chart type. For detailed configuration, see [VChart Axis Component Configuration](../../../option/areaChart#axes) -- `areaChart.tooltip`: Tooltip, default is displayed during interaction. For detailed configuration, see [VChart Tooltip Component Configuration](../../../option/areaChart#tooltip) -- For more component configurations, see [VChart areaChart Configuration](../../../option/areaChart) +- `areaChart.axes`: Axis component, default is to display and automatically infer the coordinate system and data mapping logic according to the chart type. For detailed configuration, see [VChart Axis Component Configuration](../../option/areaChart#axes) +- `areaChart.tooltip`: Tooltip, default is displayed during interaction. For detailed configuration, see [VChart Tooltip Component Configuration](../../option/areaChart#tooltip) +- For more component configurations, see [VChart areaChart Configuration](../../option/areaChart) As a 3d chart, the 3d area chart requires enabling the 3d view. Configure the 3d view in the vChart initialization parameters: diff --git a/docs/assets/tutorials/en/chart/3d-bar.md b/docs/assets/tutorials/en/chart/3d-bar.md index b5bfcb4a8b..d5f46b391b 100644 --- a/docs/assets/tutorials/en/chart/3d-bar.md +++ b/docs/assets/tutorials/en/chart/3d-bar.md @@ -24,9 +24,9 @@ The rectangular chart element is an essential building block for bar/column char Axes, tooltips, and other components, which serve as auxiliary chart display components, are optional configurations with default effects and functionality: -- `barChart.axes`: Axis component, displayed by default and automatically inferring coordinate system and data mapping logic based on chart type. For detailed configurations, see [VChart Axis Component Configuration](../../../option/barChart#axes) -- `barChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configurations, see [VChart Tooltip Component Configuration](../../../option/barChart#tooltip) -- For more component configurations, see [VChart barChart Configuration](../../../option/barChart) +- `barChart.axes`: Axis component, displayed by default and automatically inferring coordinate system and data mapping logic based on chart type. For detailed configurations, see [VChart Axis Component Configuration](../../option/barChart#axes) +- `barChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configurations, see [VChart Tooltip Component Configuration](../../option/barChart#tooltip) +- For more component configurations, see [VChart barChart Configuration](../../option/barChart) As a 3D chart, 3D scatter plot needs to enable 3D view, which needs to be configured in the initialization parameters of vChart: - `options3d.enable`: Enable 3D view diff --git a/docs/assets/tutorials/en/chart/3d-funnel.md b/docs/assets/tutorials/en/chart/3d-funnel.md index 971ff7841c..1f38786bd9 100644 --- a/docs/assets/tutorials/en/chart/3d-funnel.md +++ b/docs/assets/tutorials/en/chart/3d-funnel.md @@ -24,8 +24,8 @@ Transformation layers, labels, and other auxiliary elements are only displayed i Tooltip information and other components that assist in chart presentation are optional configurations that come with default effects and functions: -- `funnelChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configuration see [VChart Tooltip Component Configuration](../../../option/funnelChart#tooltip) -- For more component configurations, see [VChart funnelChart Configuration](../../../option/funnelChart) +- `funnelChart.tooltip`: Tooltip information, displayed by default during interaction, for detailed configuration see [VChart Tooltip Component Configuration](../../option/funnelChart#tooltip) +- For more component configurations, see [VChart funnelChart Configuration](../../option/funnelChart) As a 3D chart, a 3D scatter plot requires enabling the 3D view, which needs to be configured in the initialization parameters of vChart: @@ -100,4 +100,4 @@ const vchart = new VChart(spec, { vchart.renderAsync(); ``` -For other configurations, refer to [Funnel Chart](../../../option/funnelChart) +For other configurations, refer to [Funnel Chart](../../option/funnelChart) diff --git a/docs/assets/tutorials/en/chart/3d-line.md b/docs/assets/tutorials/en/chart/3d-line.md index b39dc79042..df65244670 100644 --- a/docs/assets/tutorials/en/chart/3d-line.md +++ b/docs/assets/tutorials/en/chart/3d-line.md @@ -20,9 +20,9 @@ 坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能: -- `lineChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../../option/line/axes/lineChart#axes) -- `lineChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../../option/line/axes/lineChart#tooltip) -- 更多组件配置见[VChart lineChart 配置](../../../option/lineChart) +- `lineChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../option/line/axes/lineChart#axes) +- `lineChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../option/line/axes/lineChart#tooltip) +- 更多组件配置见[VChart lineChart 配置](../../option/lineChart) 作为 3d 图表，3d 折线图需要开启 3d 视图，需要在 vChart 的初始化参数中配置 3d 视角: diff --git a/docs/assets/tutorials/en/chart/3d-scatter.md b/docs/assets/tutorials/en/chart/3d-scatter.md index be51499fbb..45391d4d44 100644 --- a/docs/assets/tutorials/en/chart/3d-scatter.md +++ b/docs/assets/tutorials/en/chart/3d-scatter.md @@ -18,9 +18,9 @@ 坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能: -- `scatterChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../../option/scatterChart#axes) -- `scatterChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../../option/scatterChart#tooltip) -- 更多组件配置见[VChart scatterChart 配置](../../../option/scatterChart) +- `scatterChart.axes`: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见[VChart 坐标轴组件配置](../../option/scatterChart#axes) +- `scatterChart.tooltip`: 提示信息，默认交互时显示，详细配置见[VChart 提示信息组件配置](../../option/scatterChart#tooltip) +- 更多组件配置见[VChart scatterChart 配置](../../option/scatterChart) 作为 3d 图表，3d 散点图需要开启 3d 视图，需要在 vChart 的初始化参数中配置 3d 视角: diff --git a/docs/assets/tutorials/en/chart/area.md b/docs/assets/tutorials/en/chart/area.md index c50b599ac7..3f6fa0cecd 100644 --- a/docs/assets/tutorials/en/chart/area.md +++ b/docs/assets/tutorials/en/chart/area.md @@ -1,16 +1,16 @@ # Area Chart -[\[Configuration Manual\]](../../../option/areaChart) +[\[Configuration Manual\]](../../option/areaChart) ## Introduction Area charts visually display quantitative data. It is based on line charts. Areas between the axis and the line are often emphasized with colors, textures, and shading lines. Typically, an area chart compares two or more quantities. Area charts are suitable for illustrating the trend changes of one or more groups of data under continuous independent variables, as well as comparing them with each other, while also being able to observe the changing trend of the total data. -In VChart, you can use the [area chart configuration](../../../option/areaChart) to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics: +In VChart, you can use the [area chart configuration](../../option/areaChart) to display the changing trends of both data components and total data simultaneously. As shown below, this example shows the trend of sales of different cosmetics: ![](https://temp.domain/obj/bit-cloud/350c0511133d336e622523219.png) -In the [area chart example](../../../demo/area-chart/stacked-area) shown above, you need to use the following key configurations: +In the [area chart example](../../demo/area-chart/stacked-area) shown above, you need to use the following key configurations: - `seriesField` attribute is used to declare the field participating in color mapping - `stack` attribute is declared as true for configuring stacking, which will be stacked according to the field declared in the `seriesField` attribute @@ -29,9 +29,9 @@ Point elements and line elements are essential for area charts, and relevant dra Axes, tooltips, and other auxiliary chart display components are optional configurations with default effects and functionalities: -- `areaChart.axes`: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see [VChart Axis Component Configuration](../../../option/areaChart#axes) -- `areaChart.tooltip`: Tooltip information, displayed interactively by default, for detailed configuration see [VChart Tooltip Configuration](../../../option/areaChart#tooltip) -- For more component configurations see [VChart areaChart configuration](../../../option/areaChart) +- `areaChart.axes`: Axis components, automatically displayed and inferred according to chart type with coordinate system and data mapping logic, for detailed configuration see [VChart Axis Component Configuration](../../option/areaChart#axes) +- `areaChart.tooltip`: Tooltip information, displayed interactively by default, for detailed configuration see [VChart Tooltip Configuration](../../option/areaChart#tooltip) +- For more component configurations see [VChart areaChart configuration](../../option/areaChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/bar.md b/docs/assets/tutorials/en/chart/bar.md index 91661be180..612fcc2a52 100644 --- a/docs/assets/tutorials/en/chart/bar.md +++ b/docs/assets/tutorials/en/chart/bar.md @@ -1,14 +1,14 @@ # Bar Chart / Bar Graph -[\[Configuration Manual\]](../../../option/barChart) +[\[Configuration Manual\]](../../option/barChart) ## Introduction A bar chart is a statistical chart with a variable based on the length of a rectangle. Bar charts are used to compare two or more values (different times or different conditions), with only one variable, and are often used for smaller data set analysis. -In VChart, you can display data values for multiple groups through the [Bar Chart Configuration](../../../option/barChart). As shown in the following figure: +In VChart, you can display data values for multiple groups through the [Bar Chart Configuration](../../option/barChart). As shown in the following figure: ![](https://temp.domain/obj/bit-cloud/45df54929d214e7453e228f27.png) -In the [example](../../../demo/bar-chart/group-stack-column) shown above, you need the following key configurations: +In the [example](../../demo/bar-chart/group-stack-column) shown above, you need the following key configurations: - Set the mapping field for the x-axis and the **grouping field** on the `xField` property. - `seriesField` property declares the color mapping field. @@ -19,7 +19,7 @@ A bar graph is a bar chart with a transpose of the x and y axes. The configurati ![](https://temp.domain/obj/bit-cloud/350c0511133d336e62252321d.png) -To achieve a [Population Pyramid Chart](../../../demo/bar-chart/population-pyramid) as shown above, you need to use a combination of chart + bar series + layout with the following configurations: +To achieve a [Population Pyramid Chart](../../demo/bar-chart/population-pyramid) as shown above, you need to use a combination of chart + bar series + layout with the following configurations: - Grid layout, configured through the `layout` property, used for bar chart layout. - Use the `type: common` type, i.e., the combination chart. @@ -39,9 +39,9 @@ Rectangle elements are the basic elements of bar charts/bar graphs, and the corr Coordinate axis, prompt information, and other components are optional configurations for assisting in chart presentation and come with default effects and functions: -- `barChart.axes`: coordinate axis component, default displayed, and automatically infer coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../../option/barChart#axes) -- `barChart.tooltip`: prompts information, default interaction display, detailed configuration see [VChart Tooltip Component Configuration](../../../option/barChart#tooltip) -- More component configurations see [VChart barChart configuration](../../../option/barChart) +- `barChart.axes`: coordinate axis component, default displayed, and automatically infer coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../option/barChart#axes) +- `barChart.tooltip`: prompts information, default interaction display, detailed configuration see [VChart Tooltip Component Configuration](../../option/barChart#tooltip) +- More component configurations see [VChart barChart configuration](../../option/barChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/box-plot.md b/docs/assets/tutorials/en/chart/box-plot.md index e5a4d94c92..4c7d3f65fd 100644 --- a/docs/assets/tutorials/en/chart/box-plot.md +++ b/docs/assets/tutorials/en/chart/box-plot.md @@ -1,6 +1,6 @@ # Box Plot -[\[Configuration Manual\]](../../../option/boxPlotChart) +[\[Configuration Manual\]](../../option/boxPlotChart) ## Introduction @@ -8,7 +8,7 @@ A box plot (English: box plot), also known as a box-whisker plot, box chart, box ## Chart Composition -Box plots are made up of box plot elements (box plot elements are a special type of chart element, based on the [VGrammr Glyph chart element](../../../../vgrammar/guide/guides/mark/mark-glyph) packaging) and other components. +Box plots are made up of box plot elements (box plot elements are a special type of chart element, based on the [VGrammr Glyph chart element](../../../vgrammar/guide/guides/mark/mark-glyph) packaging) and other components. ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/03421afda76ced0240204bf05.png) @@ -26,9 +26,9 @@ The box plot element is the basic element of a box plot. To draw a complete box Components such as coordinate axes and tooltips, which help present the chart, are optional configurations with built-in default effects and functions: -- `boxPlotChart.axes`: Coordinate axis component, displayed by default and automatically infers coordinate system and data mapping logic based on chart type; note that histogram does not support discrete axes, as histogram is used to display frequency distribution within data ranges, so the main axis must be input in the form of value ranges; discrete axes do not support this feature. For detailed configuration, see [VChart Coordinate Axis Component Configuration](../../../option/boxPlotChart#axes) -- `boxPlotChart.tooltip`: Tooltip information, displayed by default when interacting; for detailed configuration, see [VChart Tooltip Information Component Configuration](../../../option/boxPlotChart#tooltip) -- For more component configurations, see [VChart boxPlotChart configuration](../../../option/boxPlotChart) +- `boxPlotChart.axes`: Coordinate axis component, displayed by default and automatically infers coordinate system and data mapping logic based on chart type; note that histogram does not support discrete axes, as histogram is used to display frequency distribution within data ranges, so the main axis must be input in the form of value ranges; discrete axes do not support this feature. For detailed configuration, see [VChart Coordinate Axis Component Configuration](../../option/boxPlotChart#axes) +- `boxPlotChart.tooltip`: Tooltip information, displayed by default when interacting; for detailed configuration, see [VChart Tooltip Information Component Configuration](../../option/boxPlotChart#tooltip) +- For more component configurations, see [VChart boxPlotChart configuration](../../option/boxPlotChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/chart-types.md b/docs/assets/tutorials/en/chart/chart-types.md index 2c1a4f88f4..d986a668f9 100644 --- a/docs/assets/tutorials/en/chart/chart-types.md +++ b/docs/assets/tutorials/en/chart/chart-types.md @@ -1,5 +1,5 @@ **Chart Types** -VChart supports various different chart types, allowing users to visualize abstract data through simple configuration, including combination chart, line chart, area chart, bar/column chart, pie/doughnut chart, scatter plot, heat map, histogram, box plot, waterfall chart, progress bar, funnel chart, time series chart, interval column chart, interval area chart, word cloud, dashboard, treemap, Sankey diagram, rose chart, radar chart, map, Circle Packing, sunburst diagram, etc. For a complete description of chart types and how to use them, please refer to [VChart Options](../../../option). +VChart supports various different chart types, allowing users to visualize abstract data through simple configuration, including combination chart, line chart, area chart, bar/column chart, pie/doughnut chart, scatter plot, heat map, histogram, box plot, waterfall chart, progress bar, funnel chart, time series chart, interval column chart, interval area chart, word cloud, dashboard, treemap, Sankey diagram, rose chart, radar chart, map, Circle Packing, sunburst diagram, etc. For a complete description of chart types and how to use them, please refer to [VChart Options](../../option). ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/39b8dd02abe79e47954774000.png) @@ -27,6 +27,6 @@ You can also combine multiple chart series flexibly and freely by using combinat } ``` -For more information about how to declare combination charts, please refer to [VChart commonChart Options](../../../option/commonChart). +For more information about how to declare combination charts, please refer to [VChart commonChart Options](../../option/commonChart). For instructions on how to use each chart type, please refer to the documentation on the left side of the menu bar. diff --git a/docs/assets/tutorials/en/chart/circle-packing.md b/docs/assets/tutorials/en/chart/circle-packing.md index e2d25e266f..e1a23e3bb1 100644 --- a/docs/assets/tutorials/en/chart/circle-packing.md +++ b/docs/assets/tutorials/en/chart/circle-packing.md @@ -1,6 +1,6 @@ # Circle Packing -[\[Configuration Manual\]](../../../option/circlePackingChart) +[\[Configuration Manual\]](../../option/circlePackingChart) ## Introduction @@ -41,8 +41,8 @@ Nested circle graphics are the basic elements of Circle Packing, and the related Tooltips and other auxiliary components for chart display are optional configuration, with default effects and functionality: -- `circlePackingChart.tooltip`: Tooltip, displayed by default when interacting, detailed configuration can be found in [VChart Tooltip Component Configuration](../../../option/circlePackingChart#tooltip) -- For more component configuration, see [VChart circlePackingChart Configuration](../../../option/circlePackingChart) +- `circlePackingChart.tooltip`: Tooltip, displayed by default when interacting, detailed configuration can be found in [VChart Tooltip Component Configuration](../../option/circlePackingChart#tooltip) +- For more component configuration, see [VChart circlePackingChart Configuration](../../option/circlePackingChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/combination.md b/docs/assets/tutorials/en/chart/combination.md index 6645c5b954..9a89eb8d68 100644 --- a/docs/assets/tutorials/en/chart/combination.md +++ b/docs/assets/tutorials/en/chart/combination.md @@ -1,6 +1,6 @@ # Combination Chart -[\[Options Manual\]](../../../option/commonChart) +[\[Options Manual\]](../../option/commonChart) ## Introduction @@ -8,10 +8,10 @@ A combination chart is a type of data visualization chart that displays interdep The advantage of combination charts is that they can simultaneously present information from multiple data sets, providing a more comprehensive view of the overall trend and direction. By combining different data types, units, and measurements, combination charts can provide deeper and more comprehensive insights into complex data. Combination charts are widely used in various fields such as business, science, and medical to effectively analyze and compare various complex data. -In VChart, you can combine various series through the [combination chart configuration](../../../option/commonChart): +In VChart, you can combine various series through the [combination chart configuration](../../option/commonChart): ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/57a706137957fce7388f3ab01.png) -In the [combination chart example](../../../demo/combination/bar-combine) shown above, you need to use the following key configurations: +In the [combination chart example](../../demo/combination/bar-combine) shown above, you need to use the following key configurations: - `type: 'common'` declares a combination chart type - `layout` attribute declares a custom combination chart layout diff --git a/docs/assets/tutorials/en/chart/funnel.md b/docs/assets/tutorials/en/chart/funnel.md index dbcac659d8..440c573ab7 100644 --- a/docs/assets/tutorials/en/chart/funnel.md +++ b/docs/assets/tutorials/en/chart/funnel.md @@ -1,6 +1,6 @@ # Funnel Chart -[\[Configuration Manual\]](../../../option/funnelChart) +[\[Configuration Manual\]](../../option/funnelChart) ## Introduction @@ -26,8 +26,8 @@ Transformation layers, labels, and other auxiliary elements are displayed only u Tooltip information and other components that assist in chart display are optional configurations with default effects and features: -- `funnelChart.tooltip`: Tooltip, displayed by default during interaction, detailed configuration can be found [VChart tooltip component configuration](../../../option/funnelChart#tooltip) -- For more component configurations, see [VChart funnelChart configuration](../../../option/funnelChart) +- `funnelChart.tooltip`: Tooltip, displayed by default during interaction, detailed configuration can be found [VChart tooltip component configuration](../../option/funnelChart#tooltip) +- For more component configurations, see [VChart funnelChart configuration](../../option/funnelChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/gauge.md b/docs/assets/tutorials/en/chart/gauge.md index 38a9b57031..04023b6396 100644 --- a/docs/assets/tutorials/en/chart/gauge.md +++ b/docs/assets/tutorials/en/chart/gauge.md @@ -1,6 +1,6 @@ # Gauge Chart -[\[Configuration Manual\]](../../../option/gaugeChart) +[\[Configuration Manual\]](../../option/gaugeChart) ## Introduction diff --git a/docs/assets/tutorials/en/chart/heatmap.md b/docs/assets/tutorials/en/chart/heatmap.md index 3c756e0059..d18005b3f0 100644 --- a/docs/assets/tutorials/en/chart/heatmap.md +++ b/docs/assets/tutorials/en/chart/heatmap.md @@ -1,6 +1,6 @@ # Heatmap -[\[Configuration Manual\]](../../../option/heatmapChart) +[\[Configuration Manual\]](../../option/heatmapChart) ## Introduction @@ -8,11 +8,11 @@ Heatmap in Cartesian coordinate system requires the x-axis and y-axis to be disc One common example is to use a heatmap to represent the correlation between different statistical variables. By looking at the colors of different squares on the heatmap corresponding to the size of correlation coefficients, we can determine the size of the correlation between different variables. -In VChart, you can use the [Heatmap Configuration](../../../option/heatmapChart) to display the correlation between different variables. As shown in the following figure, this example shows the data of listed companies in 2016 by exploring the correlation between various indicators of listed companies through heatmap: +In VChart, you can use the [Heatmap Configuration](../../option/heatmapChart) to display the correlation between different variables. As shown in the following figure, this example shows the data of listed companies in 2016 by exploring the correlation between various indicators of listed companies through heatmap: ![](https://temp.domain/obj/bit-cloud/45df54929d214e7453e228f30.png) -In the [Heatmap Example](../../../demo/heatmap-chart/basic-heatmap) shown above, you need the following key configurations: +In the [Heatmap Example](../../demo/heatmap-chart/basic-heatmap) shown above, you need the following key configurations: - Set `xField` attribute as the x-axis classification field - Set `yField` attribute as the y-axis classification field @@ -47,9 +47,9 @@ Rectangle elements are the basic elements of the heatmap, and related drawing co Axis, legend, and other components are optional configurations that support default effects and functions: -- `heatmapChart.axes`: Axes components, default display and automatically inferred coordinate system and data mapping logic according to chart type, detailed configuration can be found in [VChart Axes Component Configuration](../../../option/heatmapChart#axes) -- `heatmapChart.legends`: Legend components, linear legends are commonly used in heatmaps to display mapping relationships, detailed configuration can be found in [VChart Legend Component Configuration](../../../option/heatmapChart#legends) -- More component configurations can be found in [VChart heatmapChart Configuration](../../../option/heatmapChart) +- `heatmapChart.axes`: Axes components, default display and automatically inferred coordinate system and data mapping logic according to chart type, detailed configuration can be found in [VChart Axes Component Configuration](../../option/heatmapChart#axes) +- `heatmapChart.legends`: Legend components, linear legends are commonly used in heatmaps to display mapping relationships, detailed configuration can be found in [VChart Legend Component Configuration](../../option/heatmapChart#legends) +- More component configurations can be found in [VChart heatmapChart Configuration](../../option/heatmapChart) ## Getting Started diff --git a/docs/assets/tutorials/en/chart/histogram.md b/docs/assets/tutorials/en/chart/histogram.md index 6f32606cc5..e93dfd9cf6 100644 --- a/docs/assets/tutorials/en/chart/histogram.md +++ b/docs/assets/tutorials/en/chart/histogram.md @@ -1,6 +1,6 @@ # Histogram -[\[Configuration Manual\]](../../../option/histogramChart) +[\[Configuration Manual\]](../../option/histogramChart) ## Introduction @@ -25,9 +25,9 @@ The rectangle element is the basic element of the histogram, and the relevant dr Coordinate axes, tooltips, and other components that assist chart display are optional configuration, with default effects and functionality: -- `histogramChart.axes`: Coordinate axis component, displayed by default, and automatically infers coordinate system and data mapping logic according to chart type. Note that histograms do not support discrete axes because they are used to statistically analyze the frequency distribution within each data range, and the main axis(values) must be entered as a value range, which isn't supported by the discrete axis. Detailed configuration can be found at [VChart coordinate axis component configuration](../../../option/histogramChart#axes) -- `histogramChart.tooltip`: Tooltip, displayed by default during interaction, detailed configuration can be found at [VChart tooltip component configuration](../../../option/histogramChart#tooltip) -- For more component configuration see [VChart histogramChart configuration](../../../option/histogramChart) +- `histogramChart.axes`: Coordinate axis component, displayed by default, and automatically infers coordinate system and data mapping logic according to chart type. Note that histograms do not support discrete axes because they are used to statistically analyze the frequency distribution within each data range, and the main axis(values) must be entered as a value range, which isn't supported by the discrete axis. Detailed configuration can be found at [VChart coordinate axis component configuration](../../option/histogramChart#axes) +- `histogramChart.tooltip`: Tooltip, displayed by default during interaction, detailed configuration can be found at [VChart tooltip component configuration](../../option/histogramChart#tooltip) +- For more component configuration see [VChart histogramChart configuration](../../option/histogramChart) ## Getting Started diff --git a/docs/assets/tutorials/en/chart/line.md b/docs/assets/tutorials/en/chart/line.md index 1b99886771..14472feca5 100644 --- a/docs/assets/tutorials/en/chart/line.md +++ b/docs/assets/tutorials/en/chart/line.md @@ -1,15 +1,15 @@ # Line Chart -[\[Configuration Manual\]](../../../option/lineChart) +[\[Configuration Manual\]](../../option/lineChart) ## Introduction A line chart is constructed by connecting a series of data points to reveal trends. Line charts are used to analyze the trends of things changing over time or sequential categories. If there is more than one group of data, a line chart can be used to analyze the interaction and impact of multiple data groups changing over time or categorical sequences. The direction of the line chart indicates positive/negative changes, and the slope of the line chart indicates the degree of change. -In VChart, you can display the data trends of different categories through [Line Chart Configuration](../../../option/lineChart). As shown in the example below, it displays the changing trend of cigarette consumption in developed countries: +In VChart, you can display the data trends of different categories through [Line Chart Configuration](../../option/lineChart). As shown in the example below, it displays the changing trend of cigarette consumption in developed countries: ![](https://temp.domain/obj/bit-cloud/350c0511133d336e622523215.png) -In the [Line Chart Example](../../../demo/line-chart/multi-line) shown above, you need to use the following key configurations: +In the [Line Chart Example](../../demo/line-chart/multi-line) shown above, you need to use the following key configurations: - `seriesField` property is used to declare the field involved in color mapping - `legends` property is used for configuring the legend @@ -28,9 +28,9 @@ Point elements and line elements are the basic elements of a line chart, and the Axis components, tooltip information, and other components that serve as auxiliary chart display components are optional configurations with default effects and functionality: -- `lineChart.axes`: Axis component, displayed by default and automatically infers the coordinate system and data mapping logic based on the chart type, detailed configuration can be found in [VChart Axis Component Configuration](../../../option/line/axes/lineChart#axes) -- `lineChart.tooltip`:tooltip information, displayed by default during interaction, detailed configuration can be found in [VChart Tooltip Information Component Configuration](../../../option/line/axes/lineChart#tooltip) -- For more component configurations, see [VChart lineChart Configuration](../../../option/lineChart) +- `lineChart.axes`: Axis component, displayed by default and automatically infers the coordinate system and data mapping logic based on the chart type, detailed configuration can be found in [VChart Axis Component Configuration](../../option/line/axes/lineChart#axes) +- `lineChart.tooltip`:tooltip information, displayed by default during interaction, detailed configuration can be found in [VChart Tooltip Information Component Configuration](../../option/line/axes/lineChart#tooltip) +- For more component configurations, see [VChart lineChart Configuration](../../option/lineChart) ## Quick Start @@ -407,7 +407,7 @@ window['vchart'] = vchart; ### Elements and Styles -The main elements used in line charts are two: point and line. They correspond to chart elements like markers and lines. Each mark can be individually configured for its style, see the detailed configuration: [lineChart.line](../../../option/lineChart#line) and [lineChart.point](../../../option/lineChart#point) +The main elements used in line charts are two: point and line. They correspond to chart elements like markers and lines. Each mark can be individually configured for its style, see the detailed configuration: [lineChart.line](../../option/lineChart#line) and [lineChart.point](../../option/lineChart#point) #### Dashed Lines at the End @@ -476,7 +476,7 @@ window['vchart'] = vchart; #### Marker Point Style -Marker points support custom shapes and sizes. We set the marker points to slightly larger triangles through configurations. For specific configurations, see [Configuration Documentation](../../../option/lineChart#point) +Marker points support custom shapes and sizes. We set the marker points to slightly larger triangles through configurations. For specific configurations, see [Configuration Documentation](../../option/lineChart#point) ```ts point: { diff --git a/docs/assets/tutorials/en/chart/map.md b/docs/assets/tutorials/en/chart/map.md index 267887327b..907908d4ff 100644 --- a/docs/assets/tutorials/en/chart/map.md +++ b/docs/assets/tutorials/en/chart/map.md @@ -1,6 +1,6 @@ # Map -[\[Configuration Item Manual\]](../../../option/mapChart) +[\[Configuration Item Manual\]](../../option/mapChart) ## Introduction @@ -23,7 +23,7 @@ Since mapping Geographical Regions requires the support of map data, the configu - `VChart.registerMap(mapName, mapData)`: VChart provides an api for map data registration, where`mapName`Indicates the name of the registered map data,`mapData`Refers to the specific map data, the default is`geojson`Type map data, also supported`topojson` Type map data. - `mapChart.map`: Specify to use the registered map data name -For more map related configurations, see[Map](../../../option/mapChart) +For more map related configurations, see[Map](../../option/mapChart) ## Get started quickly @@ -140,7 +140,7 @@ await vChart.renderAsync(); ### Specify nameMap As mentioned above, if the Region name in the metadata map data does not correspond to the base map data, you need to pass`mapChart.nameMap`Specify. -For example in[Base map](../../../demo/map-chart/basic-map)In the example of, the Region name in the metadata map data does not have an administrative unit, but it is in the base map data, so it needs to be configured`mapChart.nameMap`. +For example in[Base map](../../demo/map-chart/basic-map)In the example of, the Region name in the metadata map data does not have an administrative unit, but it is in the base map data, so it needs to be configured`mapChart.nameMap`. ### Custom Mapping @@ -231,7 +231,7 @@ await vChart.renderAsync(); ### Custom projection -Can be configured in Map Region`projection: type`To configure the map projection type, you can refer to the specific configuration items[Configuration Item Document](../../../option/mapChart#region.projection.type). +Can be configured in Map Region`projection: type`To configure the map projection type, you can refer to the specific configuration items[Configuration Item Document](../../option/mapChart#region.projection.type). ```javascript livedemo const spec = { diff --git a/docs/assets/tutorials/en/chart/pie.md b/docs/assets/tutorials/en/chart/pie.md index be6f9c1bc5..60d46995b2 100644 --- a/docs/assets/tutorials/en/chart/pie.md +++ b/docs/assets/tutorials/en/chart/pie.md @@ -1,6 +1,6 @@ # Pie / Ring Chart -[\[Configuration Manual\]](../../../option/pieChart) +[\[Configuration Manual\]](../../option/pieChart) ## Introduction @@ -8,9 +8,9 @@ Pie chart, also known as a pie chart, is a circular statistical chart divided in A donut chart is formed by adding the `innerRadius` and `outerRadius` attributes to the base of the pie chart to adjust the inner and outer radii of the specified sectors. -In VChart, you can display the relative relationships of multiple data through the [Pie/Donut Chart Configuration](../../../option/pieChart). The following chart shows the distribution of the U.S. population by age in 2021 using a combination of a pie chart and donut chart: +In VChart, you can display the relative relationships of multiple data through the [Pie/Donut Chart Configuration](../../option/pieChart). The following chart shows the distribution of the U.S. population by age in 2021 using a combination of a pie chart and donut chart: ![](https://temp.domain/obj/bit-cloud/45df54929d214e7453e228f2b.png) -In the [Nested Pie Chart Example](../../../demo/pie-chart/nested-pie) shown above, you need the following key configurations: +In the [Nested Pie Chart Example](../../demo/pie-chart/nested-pie) shown above, you need the following key configurations: - The `categoryField` and `valueField` attributes are used to specify the pie chart category and sector angle fields, respectively - The `innerRadius` and `outerRadius` attributes are used to specify the inner and outer radii of the sector. @@ -31,9 +31,9 @@ Sector primitives are the basic elements of pie/donut charts, and related drawin Indicator cards, tooltips, and other components that assist the chart in displaying are optional configurations with default effects and functionality: -- `pieChart.indicator`: Indicator card component, located at the heart of the pie chart, used to display total data or the data of a specific sector during interaction. See the detailed configuration of [VChart Indicator Card Component Configuration](../../../option/pieChart#indicator) -- `pieChart.tooltip`: Tooltip information, displayed by default during interaction. See the detailed configuration of [VChart Tooltip Component Configuration](../../../option/pieChart#tooltip) -- For more component configurations, see [VChart pieChart Configuration](../../../option/pieChart) +- `pieChart.indicator`: Indicator card component, located at the heart of the pie chart, used to display total data or the data of a specific sector during interaction. See the detailed configuration of [VChart Indicator Card Component Configuration](../../option/pieChart#indicator) +- `pieChart.tooltip`: Tooltip information, displayed by default during interaction. See the detailed configuration of [VChart Tooltip Component Configuration](../../option/pieChart#tooltip) +- For more component configurations, see [VChart pieChart Configuration](../../option/pieChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/progress.md b/docs/assets/tutorials/en/chart/progress.md index 3b1c148922..f5268da777 100644 --- a/docs/assets/tutorials/en/chart/progress.md +++ b/docs/assets/tutorials/en/chart/progress.md @@ -1,7 +1,7 @@ # Progress Chart -[\[Linear Progress Chart Option Manual\]](../../../option/linearProgressChart) -[\[Circular Progress Chart Option Manual\]](../../../option/circularProgressChart) +[\[Linear Progress Chart Option Manual\]](../../option/linearProgressChart) +[\[Circular Progress Chart Option Manual\]](../../option/circularProgressChart) ## Introduction @@ -23,8 +23,8 @@ The linear progress chart consists of the rectangular chart element representing Tooltip information and other components that act as auxiliary chart displays are optional configurations with default effects and functionality: -- `linearProgressChart.tooltip`: Tooltip information, displayed by default during interaction, see [VChart Tooltip Component Configuration](../../../option/linearProgressChart#tooltip) for detailed configuration -- For more component configurations, see [VChart linearProgressChart configuration](../../../option/linearProgressChart) +- `linearProgressChart.tooltip`: Tooltip information, displayed by default during interaction, see [VChart Tooltip Component Configuration](../../option/linearProgressChart#tooltip) for detailed configuration +- For more component configurations, see [VChart linearProgressChart configuration](../../option/linearProgressChart) ### Quick Start @@ -282,8 +282,8 @@ The circular progress chart consists of the arc chart element representing progr Optional components, which are auxiliary chart displays, have self-contained default effects and functionality: -- `circularProgressChart.tooltip`: Tooltip information, displayed by default during interaction, and more detailed configurations can be found in [VChart Tooltip Component Configuration](../../../option/circularProgress[type]tooltip) -- For more component configurations, see [VChart circularProgressChart configuration](../../../option/circularProgress[type]) +- `circularProgressChart.tooltip`: Tooltip information, displayed by default during interaction, and more detailed configurations can be found in [VChart Tooltip Component Configuration](../../option/circularProgress[type]tooltip) +- For more component configurations, see [VChart circularProgressChart configuration](../../option/circularProgress[type]) ### Quick Start diff --git a/docs/assets/tutorials/en/chart/radar.md b/docs/assets/tutorials/en/chart/radar.md index 87d270e3d7..ac8b58f0ef 100644 --- a/docs/assets/tutorials/en/chart/radar.md +++ b/docs/assets/tutorials/en/chart/radar.md @@ -1,6 +1,6 @@ # Radar Chart -[\[Configuration Manual\]](../../../option/radarChart) +[\[Configuration Manual\]](../../option/radarChart) ## Introduction @@ -21,9 +21,9 @@ Area chart elements and point chart elements are the basic components of a radar Coordinate axes, tooltips, and other components are optional for auxiliary chart display, with default effects and features: -- `radarChart.axes`: Axis component, displayed by default and automatically inferred based on chart type coordinate system and data mapping logic, detailed configuration see [VChart Axis Component Configuration](../../../option/radarChart#axes) -- `radarChart.tooltip`: Tooltip information, displayed interactively by default, detailed configuration see [VChart Tooltip Information Component Configuration](../../../option/radarChart#tooltip) -- More component configurations see [VChart radarChart configuration](../../../option/radarChart) +- `radarChart.axes`: Axis component, displayed by default and automatically inferred based on chart type coordinate system and data mapping logic, detailed configuration see [VChart Axis Component Configuration](../../option/radarChart#axes) +- `radarChart.tooltip`: Tooltip information, displayed interactively by default, detailed configuration see [VChart Tooltip Information Component Configuration](../../option/radarChart#tooltip) +- More component configurations see [VChart radarChart configuration](../../option/radarChart) ### Quick Start diff --git a/docs/assets/tutorials/en/chart/range-area.md b/docs/assets/tutorials/en/chart/range-area.md index 658b327963..51ecaab71f 100644 --- a/docs/assets/tutorials/en/chart/range-area.md +++ b/docs/assets/tutorials/en/chart/range-area.md @@ -1,6 +1,6 @@ # Range Area Chart -[\[Configuration Manual\]](../../../option/rangeAreaChart) +[\[Configuration Manual\]](../../option/rangeAreaChart) ## Introduction @@ -21,9 +21,9 @@ The rectangular chart element is the basic element of the range area chart, and Coordinate axes, tooltips, and other components serve as auxiliary chart display components and are optional configurations with default effects and functions: -- `rangeAreaChart.axes`: Coordinate axis component, displayed by default and automatically infers the coordinate system and data mapping logic based on the chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../../option/rangeAreaChart#axes) -- `rangeAreaChart.tooltip`: Tooltip, displayed by default when interacting, detailed configuration see [VChart Tooltip Component Configuration](../../../option/rangeAreaChart#tooltip) -- For more component configurations, see [VChart rangeAreaChart Configuration](../../../option/rangeAreaChart) +- `rangeAreaChart.axes`: Coordinate axis component, displayed by default and automatically infers the coordinate system and data mapping logic based on the chart type, detailed configuration see [VChart Coordinate Axis Component Configuration](../../option/rangeAreaChart#axes) +- `rangeAreaChart.tooltip`: Tooltip, displayed by default when interacting, detailed configuration see [VChart Tooltip Component Configuration](../../option/rangeAreaChart#tooltip) +- For more component configurations, see [VChart rangeAreaChart Configuration](../../option/rangeAreaChart) ## Getting Started Quickly diff --git a/docs/assets/tutorials/en/chart/range-column.md b/docs/assets/tutorials/en/chart/range-column.md index 5b4b08db67..afecd8e603 100644 --- a/docs/assets/tutorials/en/chart/range-column.md +++ b/docs/assets/tutorials/en/chart/range-column.md @@ -1,6 +1,6 @@ # Range Column Chart -[\[Configuration Manual\]](../../../option/rangeColumnChart) +[\[Configuration Manual\]](../../option/rangeColumnChart) ## Introduction @@ -24,9 +24,9 @@ Rectangular chart elements are essential for range column charts, and related dr Axes, tooltips, and other components that assist in chart display are optional configurations with default effects and features: -- `rangeColumnChart.axes`: Axis component, the default display automatically infers the coordinate system and data mapping logic according to the chart type, detailed configuration can be found in [VChart Axis Component Configuration](../../../option/rangeColumnChart#axes) -- `rangeColumnChart.tooltip`: Tooltip, default interactive display, detailed configuration can be found in [VChart Tooltip Component Configuration](../../../option/rangeColumnChart#tooltip) -- More component configurations can be found in [VChart rangeColumnChart Configuration](../../../option/rangeColumnChart) +- `rangeColumnChart.axes`: Axis component, the default display automatically infers the coordinate system and data mapping logic according to the chart type, detailed configuration can be found in [VChart Axis Component Configuration](../../option/rangeColumnChart#axes) +- `rangeColumnChart.tooltip`: Tooltip, default interactive display, detailed configuration can be found in [VChart Tooltip Component Configuration](../../option/rangeColumnChart#tooltip) +- More component configurations can be found in [VChart rangeColumnChart Configuration](../../option/rangeColumnChart) ### Quick Start diff --git a/docs/assets/tutorials/en/chart/rose.md b/docs/assets/tutorials/en/chart/rose.md index 367b16e64b..5197801424 100644 --- a/docs/assets/tutorials/en/chart/rose.md +++ b/docs/assets/tutorials/en/chart/rose.md @@ -1,6 +1,6 @@ # Rose Chart -[\[Configuration Manual\]](../../../option/roseChart) +[\[Configuration Manual\]](../../option/roseChart) ## Introduction @@ -24,9 +24,9 @@ Sector elements are the basic elements of a rose chart, and related drawing conf Axes, tooltips, and other components that assist in chart display are optional configurations with default effects and functionality: -- `roseChart.axes`: Axes component, displayed by default and automatically infers the coordinate system and data mapping logic according to the chart type, for detailed configuration see [VChart Axes Component Configuration](../../../option/roseChart#axes) -- `roseChart.tooltip`: Tooltip, displayed by default when interactive, for detailed configurations see [VChart Tooltip Component Configuration](../../../option/roseChart#tooltip) -- For more component configurations, see [VChart roseChart configuration](../../../option/roseChart) +- `roseChart.axes`: Axes component, displayed by default and automatically infers the coordinate system and data mapping logic according to the chart type, for detailed configuration see [VChart Axes Component Configuration](../../option/roseChart#axes) +- `roseChart.tooltip`: Tooltip, displayed by default when interactive, for detailed configurations see [VChart Tooltip Component Configuration](../../option/roseChart#tooltip) +- For more component configurations, see [VChart roseChart configuration](../../option/roseChart) ## Rose Chart Features diff --git a/docs/assets/tutorials/en/chart/sankey.md b/docs/assets/tutorials/en/chart/sankey.md index 02cb97f493..d430760fb4 100644 --- a/docs/assets/tutorials/en/chart/sankey.md +++ b/docs/assets/tutorials/en/chart/sankey.md @@ -1,6 +1,6 @@ # Sankey Diagram -[\[Configuration manual\]](../../../option/sankeyChart) +[\[Configuration manual\]](../../option/sankeyChart) ## Introduction @@ -28,8 +28,8 @@ Node and link components are essential elements of the Sankey diagram, and the r Tooltip and other components that assist in chart display are optional configurations with default effects and functions: -- `sankeyChart.tooltip`: Tooltip information. Default interaction is displayed. For detailed configuration, see the [VChart Tooltip Component Configuration](../../../option/sankeyChart#tooltip). -- For more component configurations, see [VChart sankeyChart Configuration](../../../option/sankeyChart). +- `sankeyChart.tooltip`: Tooltip information. Default interaction is displayed. For detailed configuration, see the [VChart Tooltip Component Configuration](../../option/sankeyChart#tooltip). +- For more component configurations, see [VChart sankeyChart Configuration](../../option/sankeyChart). ## Quick Start diff --git a/docs/assets/tutorials/en/chart/scatter.md b/docs/assets/tutorials/en/chart/scatter.md index 60496cd054..709c16ec88 100644 --- a/docs/assets/tutorials/en/chart/scatter.md +++ b/docs/assets/tutorials/en/chart/scatter.md @@ -1,6 +1,6 @@ # Scatter Plot -[\[Option Manual\]](../../../option/scatterChart) +[\[Option Manual\]](../../option/scatterChart) ## Introduction @@ -21,9 +21,9 @@ A scatter plot consists of point elements, axes, tooltip information, and other Axes, tooltip information, and other components are optional configurations that assist the chart display and come with default effects and capabilities: -- `scatterChart.axes`: Axis component, displayed by default, and automatically infers coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Axis Component Configuration](../../../option/scatterChart#axes) -- `scatterChart.tooltip`: Tooltip information, displayed during interaction by default, detailed configuration see [VChart Tooltip Component Configuration](../../../option/scatterChart#tooltip) -- For more component configurations, see [VChart scatterChart configuration](../../../option/scatterChart) +- `scatterChart.axes`: Axis component, displayed by default, and automatically infers coordinate system and data mapping logic based on chart type, detailed configuration see [VChart Axis Component Configuration](../../option/scatterChart#axes) +- `scatterChart.tooltip`: Tooltip information, displayed during interaction by default, detailed configuration see [VChart Tooltip Component Configuration](../../option/scatterChart#tooltip) +- For more component configurations, see [VChart scatterChart configuration](../../option/scatterChart) ### Quick Start diff --git a/docs/assets/tutorials/en/chart/sequence.md b/docs/assets/tutorials/en/chart/sequence.md index 909bb83167..4864e6896a 100644 --- a/docs/assets/tutorials/en/chart/sequence.md +++ b/docs/assets/tutorials/en/chart/sequence.md @@ -1,6 +1,6 @@ # Sequence Chart -[\[Configuration Guide\]](../../../option/sequenceChart) +[\[Configuration Guide\]](../../option/sequenceChart) ## Introduction diff --git a/docs/assets/tutorials/en/chart/sunburst.md b/docs/assets/tutorials/en/chart/sunburst.md index 2558e3a01a..c5e3fc7773 100644 --- a/docs/assets/tutorials/en/chart/sunburst.md +++ b/docs/assets/tutorials/en/chart/sunburst.md @@ -1,6 +1,6 @@ # Sunburst Chart -[\[Configuration Manual\]](../../../option/sunburstChart) +[\[Configuration Manual\]](../../option/sunburstChart) ## Introduction @@ -42,8 +42,8 @@ The hierarchical fan-like graphics are essential to the Sunburst Chart, and rela Tooltip information and other components that help with displaying the chart are optional configurations with default effects and features: -- `sunburstChart.tooltip`: Tooltip information, displayed by default during interaction. For detailed configuration, see [VChart Tooltip Component Configuration ](../../../option/sunburstChart#tooltip) -- For more component configuration, see [VChart sunburstChart configuration](../../../option/sunburstChart) +- `sunburstChart.tooltip`: Tooltip information, displayed by default during interaction. For detailed configuration, see [VChart Tooltip Component Configuration ](../../option/sunburstChart#tooltip) +- For more component configuration, see [VChart sunburstChart configuration](../../option/sunburstChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/treemap.md b/docs/assets/tutorials/en/chart/treemap.md index 97e65a1e83..7ff0202469 100644 --- a/docs/assets/tutorials/en/chart/treemap.md +++ b/docs/assets/tutorials/en/chart/treemap.md @@ -1,6 +1,6 @@ # Treemap -[\[Configuration Manual\]](../../../option/treemapChart) +[\[Configuration Manual\]](../../option/treemapChart) ## Introduction @@ -22,8 +22,8 @@ Rectangle elements are the basic elements of the treemap, and relevant drawing c Tooltip information and other components that assist in chart presentation are optional configurations with default effects and functions: -- `treemapChart.tooltip`: Tooltip, displayed by default during interactions, detailed configuration see [VChart Tooltip Component Configuration](../../../option/treemapChart#tooltip) -- More component configurations can be found at [VChart treemapChart Configuration](../../../option/treemapChart) +- `treemapChart.tooltip`: Tooltip, displayed by default during interactions, detailed configuration see [VChart Tooltip Component Configuration](../../option/treemapChart#tooltip) +- More component configurations can be found at [VChart treemapChart Configuration](../../option/treemapChart) ## Getting Started diff --git a/docs/assets/tutorials/en/chart/waterfall.md b/docs/assets/tutorials/en/chart/waterfall.md index 8707a9e6e9..5779fa748a 100644 --- a/docs/assets/tutorials/en/chart/waterfall.md +++ b/docs/assets/tutorials/en/chart/waterfall.md @@ -1,6 +1,6 @@ # Waterfall Chart -[Configuration Manual](../../../option/waterfallChart) +[Configuration Manual](../../option/waterfallChart) ## Introduction @@ -18,13 +18,13 @@ Rectangular chart elements are the basic elements of waterfall charts, and relat - `waterfallChart.data`: Data source for chart rendering - `waterfallChart.xField`: Categorical field, mapping rectangle chart element's x-coordinate or width - `waterfallChart.yField`: Numeric field, mapping rectangle chart element's height or y-coordinate -- `waterfallChart.total`: Used to configure this **rectangular chart element corresponding to the total calculated data** of the chart, see [waterfallChart.total](../../../option/waterfallChart#total) for detailed configuration +- `waterfallChart.total`: Used to configure this **rectangular chart element corresponding to the total calculated data** of the chart, see [waterfallChart.total](../../option/waterfallChart#total) for detailed configuration Coordinate axes, tooltip information, and other components that serve as auxiliary chart displays are optional configurations with default effects and features: -- `waterfallChart.axes`: Coordinate axis component, by default it is displayed and automatically inferred coordinate system and data mapping logic based on the chart type, see [VChart coordinate axis component configuration](../../../option/waterfallChart#axes) for detailed configuration -- `waterfallChart.tooltip`: Tooltip information, displayed by default during interaction, see [VChart tooltip information component configuration](../../../option/waterfallChart#tooltip) for detailed configuration -- For more component configurations, see [VChart waterfallChart configuration](../../../option/waterfallChart) +- `waterfallChart.axes`: Coordinate axis component, by default it is displayed and automatically inferred coordinate system and data mapping logic based on the chart type, see [VChart coordinate axis component configuration](../../option/waterfallChart#axes) for detailed configuration +- `waterfallChart.tooltip`: Tooltip information, displayed by default during interaction, see [VChart tooltip information component configuration](../../option/waterfallChart#tooltip) for detailed configuration +- For more component configurations, see [VChart waterfallChart configuration](../../option/waterfallChart) ## Quick Start diff --git a/docs/assets/tutorials/en/chart/word-cloud.md b/docs/assets/tutorials/en/chart/word-cloud.md index e99aa3e57d..89a4f6126f 100644 --- a/docs/assets/tutorials/en/chart/word-cloud.md +++ b/docs/assets/tutorials/en/chart/word-cloud.md @@ -1,6 +1,6 @@ # Word Cloud -[\[Options Manual\]](../../../option/wordCloudChart) +[\[Options Manual\]](../../option/wordCloudChart) ## Introduction diff --git a/docs/assets/tutorials/en/concepts/axes.md b/docs/assets/tutorials/en/concepts/axes.md index 032382361d..8cd9ce2d62 100644 --- a/docs/assets/tutorials/en/concepts/axes.md +++ b/docs/assets/tutorials/en/concepts/axes.md @@ -1,6 +1,6 @@ # Axes -The axes in the chart are the basic elements used to represent the relationships between data. They help us better understand the data and guide us in reading and analyzing the chart. This tutorial mainly explains the related concepts and components of the axes. For more detailed configuration and examples of axes, please see the [Configuration Document](../../../option) and [Example](../../../example) pages. +The axes in the chart are the basic elements used to represent the relationships between data. They help us better understand the data and guide us in reading and analyzing the chart. This tutorial mainly explains the related concepts and components of the axes. For more detailed configuration and examples of axes, please see the [Configuration Document](../../option) and [Example](../../example) pages. ## Components of Axes @@ -40,9 +40,9 @@ There are currently three types of axes supported in VChart: 1. Linear axis (type: 'linear'), suitable for numerical data; 2. Discrete axis (type: 'band'), suitable for discrete data; -3. Time axis (type: 'time'), suitable for representing time series data, for specific usage please refer to [SequenceChart Time Series Chart demo](../../../demo/sequence-chart/social-media-event); +3. Time axis (type: 'time'), suitable for representing time series data, for specific usage please refer to [SequenceChart Time Series Chart demo](../../demo/sequence-chart/social-media-event); It should be noted that histograms do not support discrete axes, as histograms are used to count the frequency distribution of data intervals, and the main axis must be passed in as value intervals, which the discrete axis does not support. -4. Log axis (type: 'log'), the characteristic of the log axis is that the interval between the scales is calculated according to the logarithmic function (usually base 10). This means that each logarithmic unit (unit of size) of the data has the same physical length, e.g. from 1 to 10, 10 to 100, 100 to 1000, etc. For exponential growth or decline of data, the log axis can better show the relative change of data. , the specific use can be viewed [log axis demo](../../../demo/axis/log-axis) +4. Log axis (type: 'log'), the characteristic of the log axis is that the interval between the scales is calculated according to the logarithmic function (usually base 10). This means that each logarithmic unit (unit of size) of the data has the same physical length, e.g. from 1 to 10, 10 to 100, 100 to 1000, etc. For exponential growth or decline of data, the log axis can better show the relative change of data. , the specific use can be viewed [log axis demo](../../demo/axis/log-axis) ### Cartesian coordinate system axis configuration diff --git a/docs/assets/tutorials/en/concepts/brush.md b/docs/assets/tutorials/en/concepts/brush.md index a0d22c0146..9103c917d8 100644 --- a/docs/assets/tutorials/en/concepts/brush.md +++ b/docs/assets/tutorials/en/concepts/brush.md @@ -1,10 +1,10 @@ # Brush Selection -Brush is an interactive component provided by VChart, which can help users select data in the chart, making it convenient for users to further analyze or manipulate data. This tutorial mainly introduces the related concepts and components of Brush. For more detailed configuration and examples of Brush, please refer to the [configuration documentation](../../../option) and [example](../../../example) pages. +Brush is an interactive component provided by VChart, which can help users select data in the chart, making it convenient for users to further analyze or manipulate data. This tutorial mainly introduces the related concepts and components of Brush. For more detailed configuration and examples of Brush, please refer to the [configuration documentation](../../option) and [example](../../example) pages. ## Components -The Brush component mainly consists of a selection area, providing rich selection types, styles, and interactions, and also provides corresponding event support (`brushChange`, see [Event API](../../../api/API/event) for details). +The Brush component mainly consists of a selection area, providing rich selection types, styles, and interactions, and also provides corresponding event support (`brushChange`, see [Event API](../../api/event) for details).
Brush Schematic diff --git a/docs/assets/tutorials/en/concepts/crosshair.md b/docs/assets/tutorials/en/concepts/crosshair.md index 7184bd36d9..c06c9130a1 100644 --- a/docs/assets/tutorials/en/concepts/crosshair.md +++ b/docs/assets/tutorials/en/concepts/crosshair.md @@ -1,6 +1,6 @@ # Crosshair -Crosshair, translated into Chinese as a crosshair, is used to mark points in the chart and add text labels. In different coordinate systems, the performance of the crosshair will be different. In VChart, crosshair is disabled by default, and users can enable it through the `crosshair` configuration. This tutorial mainly explains the concepts and composition of crosshair. For more detailed configuration and examples of crosshair, please refer to the [Configuration document](../../../option) and [Example](../../../example) pages. +Crosshair, translated into Chinese as a crosshair, is used to mark points in the chart and add text labels. In different coordinate systems, the performance of the crosshair will be different. In VChart, crosshair is disabled by default, and users can enable it through the `crosshair` configuration. This tutorial mainly explains the concepts and composition of crosshair. For more detailed configuration and examples of crosshair, please refer to the [Configuration document](../../option) and [Example](../../example) pages. ## Components diff --git a/docs/assets/tutorials/en/concepts/datazoom.md b/docs/assets/tutorials/en/concepts/datazoom.md index b7293bcb4e..ee51864e3f 100644 --- a/docs/assets/tutorials/en/concepts/datazoom.md +++ b/docs/assets/tutorials/en/concepts/datazoom.md @@ -1,6 +1,6 @@ # DataZoom Data Filtering Slider -DataZoom is a filtering slider component in the VChart chart library, which allows users to zoom and roam chart data more conveniently, improves data visibility, and enhances the interactivity of the chart. This tutorial mainly explains the related concepts and composition of DataZoom. For more detailed configuration and examples of DataZoom, please refer to the [Configuration Documentation](../../../option) and [Examples](../../../example) pages. +DataZoom is a filtering slider component in the VChart chart library, which allows users to zoom and roam chart data more conveniently, improves data visibility, and enhances the interactivity of the chart. This tutorial mainly explains the related concepts and composition of DataZoom. For more detailed configuration and examples of DataZoom, please refer to the [Configuration Documentation](../../option) and [Examples](../../example) pages. ## Composition diff --git a/docs/assets/tutorials/en/concepts/indicator.md b/docs/assets/tutorials/en/concepts/indicator.md index a8a7fda51d..7941baa482 100644 --- a/docs/assets/tutorials/en/concepts/indicator.md +++ b/docs/assets/tutorials/en/concepts/indicator.md @@ -1,6 +1,6 @@ # Indicator Card -Indicator Card (Indicator) is an important component used in pie charts, rose charts, radar charts, and other polar coordinate charts. It can display the key data information of the chart, making the chart more informative and readable. This tutorial mainly explains the related concepts and components of the indicator. For more detailed configuration and examples of indicators, please refer to the [Configuration Document](../../../option) and [Example](../../../example) pages. +Indicator Card (Indicator) is an important component used in pie charts, rose charts, radar charts, and other polar coordinate charts. It can display the key data information of the chart, making the chart more informative and readable. This tutorial mainly explains the related concepts and components of the indicator. For more detailed configuration and examples of indicators, please refer to the [Configuration Document](../../option) and [Example](../../example) pages. ## Composition diff --git a/docs/assets/tutorials/en/concepts/legend.md b/docs/assets/tutorials/en/concepts/legend.md index ada6bf3c30..55fdaad6c1 100644 --- a/docs/assets/tutorials/en/concepts/legend.md +++ b/docs/assets/tutorials/en/concepts/legend.md @@ -1,6 +1,6 @@ # Legend -Legend is an auxiliary mark in charts, which distinguishes different data groups by color, shape, and size, helping to better convey the meaning of different visual encoding. It is also commonly used for data filtering in charts. In VChart, legends are divided into discrete legends and continuous legends according to the associated data types, and continuous legends are further divided into color legends and size legends. This tutorial mainly explains the related concepts and composition of Legend. For more detailed configuration and examples of Legend, please refer to the [configuration document](../../../option) and [example](../../../example) pages. +Legend is an auxiliary mark in charts, which distinguishes different data groups by color, shape, and size, helping to better convey the meaning of different visual encoding. It is also commonly used for data filtering in charts. In VChart, legends are divided into discrete legends and continuous legends according to the associated data types, and continuous legends are further divided into color legends and size legends. This tutorial mainly explains the related concepts and composition of Legend. For more detailed configuration and examples of Legend, please refer to the [configuration document](../../option) and [example](../../example) pages. ## Discrete Legend @@ -68,7 +68,7 @@ Additionally, the paginator also provides its own interaction state style config 1. Interaction when the mouse hovers over the button 2. Interaction when the mouse clicks -This can be configured on `pager.handler.state`, see the [pager configuration documentation](../../../option/barChart#legends-discrete.pager) for details. +This can be configured on `pager.handler.state`, see the [pager configuration documentation](../../option/barChart#legends-discrete.pager) for details. ## Continuous Legend @@ -93,7 +93,7 @@ The continuous legend is divided into color legends and size legends, both of wh ## Customizing Legends -VChart's legend component provides rich configuration options to meet various data visualization needs and also provides related [API interfaces](../../../api/API). When the default legend cannot meet the business requirements, the legend can be customized through the legend configuration options and related api interfaces. +VChart's legend component provides rich configuration options to meet various data visualization needs and also provides related [API interfaces](../../api). When the default legend cannot meet the business requirements, the legend can be customized through the legend configuration options and related api interfaces. ### UI Customization @@ -369,4 +369,4 @@ vchart.on('legendItemUnHover', e => { vchart.renderAsync(); ``` -For more examples of `legend`, please refer to [Legend](../../../example). +For more examples of `legend`, please refer to [Legend](../../example). diff --git a/docs/assets/tutorials/en/concepts/marker.md b/docs/assets/tutorials/en/concepts/marker.md index f4a6aea23c..320674a5da 100644 --- a/docs/assets/tutorials/en/concepts/marker.md +++ b/docs/assets/tutorials/en/concepts/marker.md @@ -2,7 +2,7 @@ Marker is a chart auxiliary annotation component designed to enhance data perception and assist data narration, commonly used to highlight a specific data point or display the statistical results of multiple data points. **It should be noted that this component currently only supports Cartesian coordinate system charts.** -This tutorial mainly explains the related concepts and components of the Marker component. For more detailed configuration and examples of the Marker component, please refer to the [Configuration Documentation](../../../option) and [Example](../../../example) pages. +This tutorial mainly explains the related concepts and components of the Marker component. For more detailed configuration and examples of the Marker component, please refer to the [Configuration Documentation](../../option) and [Example](../../example) pages. ## Annotation Types @@ -101,4 +101,4 @@ MarkArea can be configured through the `markArea` attribute: ## Examples -For more examples of using the Marker component, please refer to the [Marker Examples](../../../example) page. +For more examples of using the Marker component, please refer to the [Marker Examples](../../example) page. diff --git a/docs/assets/tutorials/en/concepts/player.md b/docs/assets/tutorials/en/concepts/player.md index 966f100632..362362d8b8 100644 --- a/docs/assets/tutorials/en/concepts/player.md +++ b/docs/assets/tutorials/en/concepts/player.md @@ -1,6 +1,6 @@ # Player -Player's main purpose is to enhance dynamic narrative capabilities, supporting basic functions such as playing, pausing, fast forwarding, and rewinding, helping users dynamically display sequential data. It can be divided into two types of playback based on the supported data types: discrete and continuous. By using the Player component, users can trace back the changes in the data in the chart, which helps them to observe data changes more intuitively. This tutorial mainly introduces the concepts and components of Player, for more detailed configuration and examples of Player, please refer to the [Configuration Document](../../../option) and [Examples](../../../example) pages. +Player's main purpose is to enhance dynamic narrative capabilities, supporting basic functions such as playing, pausing, fast forwarding, and rewinding, helping users dynamically display sequential data. It can be divided into two types of playback based on the supported data types: discrete and continuous. By using the Player component, users can trace back the changes in the data in the chart, which helps them to observe data changes more intuitively. This tutorial mainly introduces the concepts and components of Player, for more detailed configuration and examples of Player, please refer to the [Configuration Document](../../option) and [Examples](../../example) pages. ## Components @@ -28,7 +28,7 @@ According to the presentation type of the player, Player can be divided into two ## Examples -- [Basic Player (Discrete)](../../../demo/player/basic-player) -- [Basic Player (Continuous)](../../../demo/player/continuous-player) -- [ranking-bar](../../../demo/player/ranking-bar) -- [timeline-scatter](../../../demo/player/timeline-scatter) +- [Basic Player (Discrete)](../../demo/player/basic-player) +- [Basic Player (Continuous)](../../demo/player/continuous-player) +- [ranking-bar](../../demo/player/ranking-bar) +- [timeline-scatter](../../demo/player/timeline-scatter) diff --git a/docs/assets/tutorials/en/concepts/scrollbar.md b/docs/assets/tutorials/en/concepts/scrollbar.md index f046da7b59..6b08e08660 100644 --- a/docs/assets/tutorials/en/concepts/scrollbar.md +++ b/docs/assets/tutorials/en/concepts/scrollbar.md @@ -1,6 +1,6 @@ # Scrollbar -Scrollbar is an interactive component provided by VChart, which is similar to the ordinary dom scrollbar. When the content area of the chart is larger than the display area, the scrollbar can be configured to help view the chart. This tutorial mainly explains the related concepts and composition of the Scrollbar component. For more detailed configuration and examples of the Scrollbar component, please refer to the [configuration documentation](../../../option) and [example](../../../example) pages. +Scrollbar is an interactive component provided by VChart, which is similar to the ordinary dom scrollbar. When the content area of the chart is larger than the display area, the scrollbar can be configured to help view the chart. This tutorial mainly explains the related concepts and composition of the Scrollbar component. For more detailed configuration and examples of the Scrollbar component, please refer to the [configuration documentation](../../option) and [example](../../example) pages. ## Components diff --git a/docs/assets/tutorials/en/concepts/series/label.md b/docs/assets/tutorials/en/concepts/series/label.md index 4d898fd87d..e9f479d9d3 100644 --- a/docs/assets/tutorials/en/concepts/series/label.md +++ b/docs/assets/tutorials/en/concepts/series/label.md @@ -36,7 +36,7 @@ In this example, we set some basic styles for the data labels of the line chart: - `fontSize`: Set the font size of the label text. - `fontWeight`: Set the font weight of the label text. -For supported configuration properties of text graphics, please refer to the [configuration documentation](../../../../option/lineChart#label.style). +For supported configuration properties of text graphics, please refer to the [configuration documentation](../../../option/lineChart#label.style). You can try editing the label styles in the example below: @@ -151,7 +151,7 @@ In this example, we set the following options for the data labels of the scatter - `overlap`: If set to `false`, it indicates turning off the label avoidance function. - `overlap.hideOnHit`: Set not to hide when labels overlap. - - `overlap.strategy`: Set the processing strategy when labels overlap. For detailed strategy configuration, please refer to the [configuration documentation](../../../../option/scatterChart#label.overlap) + - `overlap.strategy`: Set the processing strategy when labels overlap. For detailed strategy configuration, please refer to the [configuration documentation](../../../option/scatterChart#label.overlap) Here's an example of a custom label anti-overlap strategy for a bar chart: diff --git a/docs/assets/tutorials/en/concepts/series/mark.md b/docs/assets/tutorials/en/concepts/series/mark.md index a1bdd9ac8e..1f7dce19d7 100644 --- a/docs/assets/tutorials/en/concepts/series/mark.md +++ b/docs/assets/tutorials/en/concepts/series/mark.md @@ -260,7 +260,7 @@ vchart.renderAsync(); ## Gradient configuration -The graphic elements of the chart can be configured with gradient colors, [column graph](../../../../demo/gradient/bar), [line graph](../../../.. /demo/gradient/line), [area](../../../../demo/gradient/bar), [bubble](../../../../demo /gradient/bar) etc. can be used. +The graphic elements of the chart can be configured with gradient colors, [column graph](../../../demo/gradient/bar), [line graph](../../../.. /demo/gradient/line), [area](../../../demo/gradient/bar), [bubble](../../../../demo /gradient/bar) etc. can be used. ### The basic concept and configuration interface of gradient color @@ -490,7 +490,7 @@ In the schematic diagram below, 4 stops are set, and the color of the entire col 线的渐变坐标
-Based on stop we can make a specific [gradient color chart](../../../../demo/gradient/enhancement-gradient-line) +Based on stop we can make a specific [gradient color chart](../../../demo/gradient/enhancement-gradient-line) This particular gradient color chart expects the portion of the line above 60 points to be green and the portion below 60 points to be red. We can find a way to make a specific set of stops to achieve @@ -515,4 +515,4 @@ const mid = 60; // the data value you want to use as the dividing point const percent = (max - mid) / (max - min); ``` -The complete configuration can be viewed in [diagram example](../../../../demo/gradient/enhancement-gradient-line) +The complete configuration can be viewed in [diagram example](../../../demo/gradient/enhancement-gradient-line) diff --git a/docs/assets/tutorials/en/concepts/title.md b/docs/assets/tutorials/en/concepts/title.md index 574d70a26f..2b0a4c45e2 100644 --- a/docs/assets/tutorials/en/concepts/title.md +++ b/docs/assets/tutorials/en/concepts/title.md @@ -1,6 +1,6 @@ # Title 标题 -The chart title is mainly used to display the theme information of the chart. The title of VChart is displayed at the top of the chart by default, consisting of the main title and subtitle, with the option of displaying the subtitle below. This tutorial mainly explains the related concepts and components of Title. For more detailed configuration and examples of Title, please refer to [Configuration Document](../../../option) and [Example](../../../example) pages. +The chart title is mainly used to display the theme information of the chart. The title of VChart is displayed at the top of the chart by default, consisting of the main title and subtitle, with the option of displaying the subtitle below. This tutorial mainly explains the related concepts and components of Title. For more detailed configuration and examples of Title, please refer to [Configuration Document](../../option) and [Example](../../example) pages. ## Components of Title @@ -21,4 +21,4 @@ In VChart, we can configure the title through the `title` attribute. The followi } ``` -For complete configuration details, see [title](../../../option/barChart#title). +For complete configuration details, see [title](../../option/barChart#title). diff --git a/docs/assets/tutorials/en/concepts/tooltip.md b/docs/assets/tutorials/en/concepts/tooltip.md index c2511aa79b..899926a520 100644 --- a/docs/assets/tutorials/en/concepts/tooltip.md +++ b/docs/assets/tutorials/en/concepts/tooltip.md @@ -1,6 +1,6 @@ # Tooltip -Tooltip is the additional information displayed on different elements of the VChart chart, which is displayed through mouse hover operation. This tutorial mainly explains the related concepts and components of the tooltip. For more detailed configuration and examples of the components, please see the [Configuration Documentation](../../../option) and [Example](../../../example) pages. +Tooltip is the additional information displayed on different elements of the VChart chart, which is displayed through mouse hover operation. This tutorial mainly explains the related concepts and components of the tooltip. For more detailed configuration and examples of the components, please see the [Configuration Documentation](../../option) and [Example](../../example) pages.
tooltip @@ -109,7 +109,7 @@ Content formatting example: ## Customization -According to the chart and business requirements, we can further customize the tooltip. For details, please refer to the [`setTooltipHandler`](../../../api/API/vchart) method. +According to the chart and business requirements, we can further customize the tooltip. For details, please refer to the [`setTooltipHandler`](../../api/API/vchart) method. ```javascript livedemo const data = [ diff --git a/docs/assets/tutorials/en/custom-extension/custom-animation.md b/docs/assets/tutorials/en/custom-extension/custom-animation.md index 020f0d40ff..c5f7f9ac0b 100644 --- a/docs/assets/tutorials/en/custom-extension/custom-animation.md +++ b/docs/assets/tutorials/en/custom-extension/custom-animation.md @@ -399,7 +399,7 @@ export interface ICustomAnimate { MergedEndProps: () => Record | void; } ``` -The interface defines some basic animation properties and lifecycle functions that can be used to create, update, and destroy custom animations. Detailed documentation can be found in [VRender Custom Animation](../../../../vrender/guide/asd/Basic_Tutorial/Events_and_Animation). +The interface defines some basic animation properties and lifecycle functions that can be used to create, update, and destroy custom animations. Detailed documentation can be found in [VRender Custom Animation](../../../vrender/guide/asd/Basic_Tutorial/Events_and_Animation). The following example uses the built-in `StreamLight` custom animation class from `VRender` to implement the bar chart streamer effect: diff --git a/docs/assets/tutorials/en/data/typesAndDefinitions.md b/docs/assets/tutorials/en/data/typesAndDefinitions.md index 28452e0f35..f776d67eb9 100644 --- a/docs/assets/tutorials/en/data/typesAndDefinitions.md +++ b/docs/assets/tutorials/en/data/typesAndDefinitions.md @@ -117,7 +117,7 @@ vchart.renderAsync(); #### Data Flattening -We provide a data flattening tool called `transform` and `flod`, which can help users convert non-flattened data into flattened data. In VChart, we offer various built-in data processing tools and support for adding custom data processing tools. For specific methods, please refer to [DataSet](./Dataset_and_Data_Processing). +We provide a data flattening tool called `transform` and `flod`, which can help users convert non-flattened data into flattened data. In VChart, we offer various built-in data processing tools and support for adding custom data processing tools. For specific methods, please refer to [DataSet](./dataSet). The usage example of `flod` is as follows: diff --git a/docs/assets/tutorials/en/event.md b/docs/assets/tutorials/en/event.md index e3ca83618a..4ee0024658 100644 --- a/docs/assets/tutorials/en/event.md +++ b/docs/assets/tutorials/en/event.md @@ -2,11 +2,11 @@ VChart provides event listening methods on its instances, allowing developers to meet their business needs by listening to events. The events available on VChart include not only basic DOM events but also component interaction events, lifecycle events, etc. -This tutorial will introduce the use of events through two examples. For more detailed information, please refer to the [event API](../../../api/API/event). +This tutorial will introduce the use of events through two examples. For more detailed information, please refer to the [event API](../api/event). ## How to listen for mouse events on graphic elements -VChart supports regular mouse, pointer, and other event types, all of which are described in the [events API documentation](../../../api/API/event). +VChart supports regular mouse, pointer, and other event types, all of which are described in the [events API documentation](../api/event). The following example demonstrates the interaction of opening the corresponding Baidu search page after clicking on a bar in a bar chart by listening for the `click` event on the bar graphic element. @@ -40,7 +40,7 @@ vchart.on('click', { level: 'mark', type: 'bar' }, e => { ## How to listen for component interaction events -In VChart, almost all component interaction behaviors will trigger corresponding events. All component interaction events and their parameters are described in the [events API documentation](../../../api/API/event). +In VChart, almost all component interaction behaviors will trigger corresponding events. All component interaction events and their parameters are described in the [events API documentation](../api/event). The example below listens for the `'legendItemHover'` event triggered when the mouse hovers over a legend item: diff --git a/docs/assets/tutorials/en/how-to-use-site.md b/docs/assets/tutorials/en/how-to-use-site.md index d248331bed..61680d4d14 100644 --- a/docs/assets/tutorials/en/how-to-use-site.md +++ b/docs/assets/tutorials/en/how-to-use-site.md @@ -6,19 +6,19 @@ This document is mainly to help you better use the VChart site and help you get ### Quick Start -First, you need to complete the VChart [Quick Start](./Getting_Started) section, which will teach you how to configure and use the environment required by VChart, as well as how to build your first graphic. +First, you need to complete the VChart [Quick Start](./getting-started) section, which will teach you how to configure and use the environment required by VChart, as well as how to build your first graphic. ### Understand Your First Chart -After completing the [Quick Start](./Getting_Started), you can learn more about how to create a simple line chart by studying the [Chart Components](../tutorial_docs/Chart_Concepts/Understanding_VChart) section, including data, series, marks, and components configurations. +After completing the [Quick Start](./getting-started), you can learn more about how to create a simple line chart by studying the [Chart Components](../concepts/understanding-vchart) section, including data, series, marks, and components configurations. ## Documentation VChart's documentation provides detailed information about features and configurations. Depending on your needs, you can check out the following sections: -- [Tutorial](./VChart_Website_Guide): Introduces the basic concepts and various usage methods of VChart charts. -- [Configuration Items](../../option): Provides detailed explanations of all configuration items for VChart charts. -- [API](../../api): Provides detailed explanations of all available interfaces for VChart. +- [Tutorial](./how-to-use-site): Introduces the basic concepts and various usage methods of VChart charts. +- [Configuration Items](../option): Provides detailed explanations of all configuration items for VChart charts. +- [API](../api): Provides detailed explanations of all available interfaces for VChart. ## Chart Examples diff --git a/docs/assets/tutorials/en/intelligent-visualization/getting-started-data-video.md b/docs/assets/tutorials/en/intelligent-visualization/getting-started-data-video.md index daf972ed56..10b1128e54 100644 --- a/docs/assets/tutorials/en/intelligent-visualization/getting-started-data-video.md +++ b/docs/assets/tutorials/en/intelligent-visualization/getting-started-data-video.md @@ -282,7 +282,7 @@ const { spec, time } = await(vmind.generateChart(csvData, describe)); //Intellig In this way we get the VChart spec and video duration corresponding to the dynamic chart. -VMind currently supports bar charts, pie charts, line charts, scatter charts, word clouds, and dynamic bar charts. you can refer to [Get started quickly with VChart](http://www.visactor.io/vchart/guide/tutorial_docs/Getting_Started). Use VChart to plot it, or continue to use VMind to export it as a video or GIF. In the future, VMind will also support conversational chart editing, applying editing operations directly to charts through natural language for more personalized data video creation. +VMind currently supports bar charts, pie charts, line charts, scatter charts, word clouds, and dynamic bar charts. you can refer to [Get started quickly with VChart](../getting-started). Use VChart to plot it, or continue to use VMind to export it as a video or GIF. In the future, VMind will also support conversational chart editing, applying editing operations directly to charts through natural language for more personalized data video creation. # Chart video export diff --git a/docs/assets/tutorials/en/intelligent-visualization/getting-started-vmind.md b/docs/assets/tutorials/en/intelligent-visualization/getting-started-vmind.md index a1e99317a9..f1c8a212a1 100644 --- a/docs/assets/tutorials/en/intelligent-visualization/getting-started-vmind.md +++ b/docs/assets/tutorials/en/intelligent-visualization/getting-started-vmind.md @@ -18,7 +18,7 @@ npm install @visactor/vmind yarn add @visactor/vmind ``` -VMind needs to be used with VChart. In order to draw diagrams, you also need to introduce VChart into your project. See the specific tutorial for details [Get started quickly](http://www.visactor.io/vchart/guide/tutorial_docs/Getting_Started) +VMind needs to be used with VChart. In order to draw diagrams, you also need to introduce VChart into your project. See the specific tutorial for details [Get started quickly](../getting-started) ## Introducing VMind diff --git a/docs/assets/tutorials/en/multi-platform/cross-end/first-of-all.md b/docs/assets/tutorials/en/multi-platform/cross-end/first-of-all.md index 86a4265263..e970ac4237 100644 --- a/docs/assets/tutorials/en/multi-platform/cross-end/first-of-all.md +++ b/docs/assets/tutorials/en/multi-platform/cross-end/first-of-all.md @@ -43,8 +43,8 @@ The `mode` value for Feishu Widgets, Feishu Mini Programs and Byte Mini Programs For specific usage, please refer to the respective tutorials: -- [Feishu Widgets](./block) -- [Feishu Mini Programs](./lark) -- [Byte Mini Programs](./tt) +- [Feishu Widgets](./miniapp-block) +- [Feishu Mini Programs](./miniapp-lark) +- [Byte Mini Programs](./miniapp-tt) In addition, other mini-programs, such as WeChat Mini Programs, are also in our compatibility plan and will be available soon. diff --git a/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-lark.md b/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-lark.md index cb9a4058b0..59e43f3552 100644 --- a/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-lark.md +++ b/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-lark.md @@ -25,9 +25,9 @@ The usage of the `@visactor/lark-vchart` chart component is shown below: ``` - `canvas-id` is the chart id, consistent with the id of the dom. Please make sure the id is not duplicated. -- `spec` is the core concept of VChart, with the spec of the cross-end component consistent with the PC side. Chart configuration examples can be found in [VChart Examples](../../../../example). For users unfamiliar with VChart, please refer to the [Getting Started with VChart](../../Getting_Started) tutorial. +- `spec` is the core concept of VChart, with the spec of the cross-end component consistent with the PC side. Chart configuration examples can be found in [VChart Examples](../../../example). For users unfamiliar with VChart, please refer to the [Getting Started with VChart](../../getting-started) tutorial. - `styles` are the chart container styles, which can be used to control chart width, height, etc. -- `events` is an array of objects used to register a series of events, defined as follows. For specific event names, event filter configurations, and callback function parameters, please refer to [VChart Event API](../../../../api/API/event) +- `events` is an array of objects used to register a series of events, defined as follows. For specific event names, event filter configurations, and callback function parameters, please refer to [VChart Event API](../../../api/event) ```ts interface IEvent { @@ -160,6 +160,21 @@ onChartReady() { }, ``` +To give the pie chart to the label text callback function as an example, the detailed steps refer to the following (the user can adjust the strategy depending on the situation, here only provides a basic idea and steps): +- step1: Configure the id and chartOnReady event when declaring the chart component to updateSpec when the empty chart is rendered. +![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/miniapp-support-function-a.png) + +- step2: when initializing the chart, declare an empty chart (chart type and data must be declared, data can be declared as an empty array) +![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/miniapp-support-function-b.png) + +- step3: In the onChartReady event, get the component and chart instance by selectComponent and update the spec of the chart instance + +![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/miniapp-support-function-c.png) + +- Result: The callback function for the pie chart's label works. + +![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/miniapp-support-function-d.gif) + ## Feedback If you encounter any problems during use, please feel free to provide feedback on [GitHub issues](https://github.com/VisActor/VChart/issues/new/choose), thank you! diff --git a/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-tt.md b/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-tt.md index 33b6b097f3..f8749c4417 100644 --- a/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-tt.md +++ b/docs/assets/tutorials/en/multi-platform/cross-end/miniapp-tt.md @@ -24,9 +24,9 @@ The use of the `@visactor/tt-vchart` chart component is shown below: ``` - `canvasId` is the id of the chart, consistent with the id of the dom, please make sure **id is not repeated**. -- `spec` is the core concept of VChart, and the spec of the cross-end components is consistent with the PC end. Chart configuration examples can be found in [VChart Chart Examples](../../../../example). For users who are not familiar with VChart, you can refer to the [Getting Started with VChart](../../Getting_Started) tutorial. +- `spec` is the core concept of VChart, and the spec of the cross-end components is consistent with the PC end. Chart configuration examples can be found in [VChart Chart Examples](../../../example). For users who are not familiar with VChart, you can refer to the [Getting Started with VChart](../../getting-started) tutorial. - `styles` is the style of the chart container, which can be used to control chart width, height, and other styles. -- `events` is an array of objects used to register a series of events, defined as follows, specific event names, event filtering configurations, and callback function parameters refer to [VChart Event API](todo) +- `events` is an array of objects used to register a series of events, defined as follows, specific event names, event filtering configurations, and callback function parameters refer to [VChart Event API](../../../api/event) ```ts interface IEvent { diff --git a/docs/assets/tutorials/en/multi-platform/taro.md b/docs/assets/tutorials/en/multi-platform/taro.md index e51392b7a2..b12cda8a9f 100644 --- a/docs/assets/tutorials/en/multi-platform/taro.md +++ b/docs/assets/tutorials/en/multi-platform/taro.md @@ -86,10 +86,10 @@ Usage example of the chart component: | ------------- | -------- | -----------------------------------------------------------------------------------------------| | type | string | Configured environment, currently supported environments: **Byte Mini Program** ('tt'), **Lark Mini Program** ('lark'), **Browser** ('h5', 'web') | | canvasId | String | Chart id, must be unique | -| spec | Object | Chart configuration item, please refer to [VChart Configuration Item](../../../option) | +| spec | Object | Chart configuration item, please refer to [VChart Configuration Item](../../option) | | style | Object | Chart container style | | events | Object[] | Event binding configuration | -| options | Object | Additional configuration items passed to the VChart instance during initialization, the same as [VChart instantiation configuration items](../../../api/API/vchart#options)| +| options | Object | Additional configuration items passed to the VChart instance during initialization, the same as [VChart instantiation configuration items](../../api/API/vchart#options)| | onChartInit | Function | Callback triggered after the chart is initialized | | onChartReady | Function | Callback triggered after the chart is rendered | | onChartUpdate | Function | Callback triggered after the chart is updated | @@ -189,7 +189,7 @@ In addition, users can also use the rendering interface provided by the VChart i - `chartInstance.updateData()` Update chart based on data -For detailed usage, please refer to: [VChart API](../../../api/API) +For detailed usage, please refer to: [VChart API](../../api/API) #### Example diff --git a/docs/assets/tutorials/en/multi-platform/vue.md b/docs/assets/tutorials/en/multi-platform/vue.md new file mode 100644 index 0000000000..5ac4674aa0 --- /dev/null +++ b/docs/assets/tutorials/en/multi-platform/vue.md @@ -0,0 +1,241 @@ +# How to use VChart in Vue +Using VChart in Vue 3.x, there are two cases: +1. Combined API, please refer to [online demo](https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6?file=/src/components/LineChart.vue) +2. Optional API, for details, please refer to [online demo](https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6?file=/src/components/BarChart.vue) + +## Code Sources +### Composite API +```javascript + + + + + +``` +### Optional API +```javascript + + + + + +``` +## Results +- Online effect reference: [https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6](https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6) + +! [] (https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vue-demo.gif) \ No newline at end of file diff --git a/docs/assets/tutorials/menu.json b/docs/assets/tutorials/menu.json index 142f69a45e..b7f9d1d731 100644 --- a/docs/assets/tutorials/menu.json +++ b/docs/assets/tutorials/menu.json @@ -588,6 +588,13 @@ "en": "Taro VChart" } }, + { + "path": "vue", + "title": { + "zh": "Vue VChart", + "en": "Vue VChart" + } + }, { "path": "cross-end", "title": { diff --git a/docs/assets/tutorials/zh/animation/advanced-animation.md b/docs/assets/tutorials/zh/animation/advanced-animation.md index 0c2d92fc29..cd12503a36 100644 --- a/docs/assets/tutorials/zh/animation/advanced-animation.md +++ b/docs/assets/tutorials/zh/animation/advanced-animation.md @@ -102,7 +102,7 @@ const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync(); ``` -上面的例子，就是在利用我们上一章（[动画类型](./Animation_Types)）中介绍的`duration`/`delay`/`easing`/`oneByOne`配置来实现简单的动画效果。 +上面的例子，就是在利用我们上一章（[VChart 动画教程](./defination-of-animtion)）中介绍的`duration`/`delay`/`easing`/`oneByOne`配置来实现简单的动画效果。 图元的动画配置支持多种属性，用于对图元动画行为进行细节控制。以下是图元动画配置支持的属性： @@ -682,4 +682,4 @@ vchart.renderAsync(); 在动画效果（Effect）中的如果简单的 `channel` 配置无法满足你的需要，可以通过`custom`和`customParameters`来配置自定义动画效果： - `custom`：自定义动画； - `customParameters`：自定义动画参数； -详细使用可以参考[自定义动画](../extend/custom_animation)章节。 +详细使用可以参考[自定义动画](../custom-extension/custom-animation)章节。 diff --git a/docs/assets/tutorials/zh/animation/how-to-config-animation.md b/docs/assets/tutorials/zh/animation/how-to-config-animation.md index 525303fed7..01b9236b47 100644 --- a/docs/assets/tutorials/zh/animation/how-to-config-animation.md +++ b/docs/assets/tutorials/zh/animation/how-to-config-animation.md @@ -65,7 +65,7 @@ window['vchart'] = vchart; ### 动画缓动效果 -缓动效果是描述动画“变速度”的过程。设置合适的缓动效果可以让图表动画更具生动感。VChart内置了众多缓动效果类型，我们可以通过`animation.easing`属性来选择。默认值为`cubicOut`。以下可选的内置缓动效果类型，可以参考[缓动demo](../../../demo/combination/easing-visualization) +缓动效果是描述动画“变速度”的过程。设置合适的缓动效果可以让图表动画更具生动感。VChart内置了众多缓动效果类型，我们可以通过`animation.easing`属性来选择。默认值为`cubicOut`。以下可选的内置缓动效果类型，可以参考[缓动demo](../../demo/combination/easing-visualization) - linear - quadIn diff --git a/docs/assets/tutorials/zh/basic/how-to-define-spec.md b/docs/assets/tutorials/zh/basic/how-to-define-spec.md index 36843b8071..05f4593243 100644 --- a/docs/assets/tutorials/zh/basic/how-to-define-spec.md +++ b/docs/assets/tutorials/zh/basic/how-to-define-spec.md @@ -106,7 +106,7 @@ ## 4. 系列配置 -柱状图对应 `'bar'` 系列，`'bar'` 系列包含 `'bar'` 图元和 label，我们可以对这些图元和 label 进行配置。更多关于系列的介绍详见[系列教程](../Chart_Concepts/Series/Composition_and_Effect_of_Series)。 +柱状图对应 `'bar'` 系列，`'bar'` 系列包含 `'bar'` 图元和 label，我们可以对这些图元和 label 进行配置。更多关于系列的介绍详见[系列教程](../concepts/series/series)。 ### 4.1 图元样式配置 diff --git a/docs/assets/tutorials/zh/basic/how-to-get-vchart.md b/docs/assets/tutorials/zh/basic/how-to-get-vchart.md index 753cb93d0e..3596935a55 100644 --- a/docs/assets/tutorials/zh/basic/how-to-get-vchart.md +++ b/docs/assets/tutorials/zh/basic/how-to-get-vchart.md @@ -16,7 +16,7 @@ $ npm install @visactor/vchart $ yarn add @visactor/vchart ``` -获取时候如何使用，详见[如何在项目中引用 VChart](./How_to_Import_VChart)。 +获取时候如何使用，详见[如何在项目中引用 VChart](./how-to-import-vchart)。 ## cdn 获取 diff --git a/docs/assets/tutorials/zh/basic/how-to-import-vchart.md b/docs/assets/tutorials/zh/basic/how-to-import-vchart.md index 4472dfb1b2..62a8ac1eac 100644 --- a/docs/assets/tutorials/zh/basic/how-to-import-vchart.md +++ b/docs/assets/tutorials/zh/basic/how-to-import-vchart.md @@ -1,10 +1,10 @@ # 如何在项目中引用 VChart -在[如何获取 VChart](./How_to_Get_VChart)章节中我们介绍了获取 VChart 的方式，本章节会一一介绍这些获取方式下如何引用 VChart。 +在[如何获取 VChart](./how-to-get-vchart)章节中我们介绍了获取 VChart 的方式，本章节会一一介绍这些获取方式下如何引用 VChart。 ## cdn 使用 -我们从 [cdn](./How_to_Get_VChart#cdn-获取) 获取到 VChart 文件后，就可以将其添加到 HTML 文件的 ` + + + + +``` + +### 选项式API +```javascript + + + + + +``` + +## 结果展示 +- 在线效果参考：[https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6](https://codesandbox.io/s/viscator-vchart-vue-demo-gmcpq6) + +![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vue-demo.gif) diff --git a/option b/option new file mode 100644 index 0000000000..e69de29bb2