It is not only a fully functional graph visualization library, but also an explorer of data relationships.
!!!###!!!title=VChart——VisActor/VChart api documents!!!###!!!!!!###!!!description=global `VChart` Objects, which also serve as the general entry point for charts, are used for chart creation, update, and destruction.!!!###!!!
VChart
global VChart Objects, which also serve as the general entry point for charts, are used for chart creation, update, and destruction.
static properties
ThemeManager
Theme manager. It can be used to register, set up and obtain deng for global Themes, seeTheme.
globalConfig
Global configuration items for VChart. The properties in this object can be directly modified, and the time when the configuration takes effect depends on the specific configuration item.
uniqueTooltip(number) = true
Whether to globally display unique tooltips. If set to true, when a chart triggers a tooltip, the tooltips of all other charts on the same page will automatically disappear.
This configuration modification takes effect immediately.
static method
useRegisters
API is supported since version 1.5.1.
It is used to load charts, series, components, environment-compatible codes, etc. on demand. For details, please refer to the On-demand Import Tutorial.
useChart
Used to register custom charts for extensions.
useSeries
Used to register custom series for extensions.
useComponent
Used to register custom component for extensions.
useMark
Used to register custom mark for extensions.
useLayout
Used to register custom layout for extensions.
registerDataSetTransform
Used to register DataSet data methods.
registerMap
Used to register map data.
unregisterMap
Used to unload map data.
getMap
Obtain the corresponding map data according to the registered map name.
Chart configuration, including rendering containers, etc., see the following table for details:
Attribute Name
Type
Required
Description
dom
string|HTMLElement
No
Valid only in browser environments. The parent container of the chart mount, you can directly specify the container id, or you can pass in the dom object
renderCanvas
string|HTMLCanvasElement
No
In addition to selecting the dom property to mount the parent container, you can also use the renderCanvas property to directly pass in the canvas instance/canvasId, for the Mini Program/widget environment, please pass in the id directly
dataSet
DataSet
No
Dataset
autoFit
boolean
No
Whether to adapt to container size, default is true
animation
boolean
No
Whether to turn on animation, the default is true
options3d
srIOption3DType
No
3d Configuration
layout
LayoutCallBack
No
Custom layout function
mode
string
No
Configure the rendering environment, the default is'desktop-browser ', when you need to render VChart in a non-browser environment, you need to configure this property. 'desktop-browser': Default mode, suitable for PC and H5; 'mobile-browser': H5 mode; 'node': Node rendering; 'worker': worker mode; 'miniApp': Mini Program Mode; 'lynx': lynx rendering
modeParams
any
No
configuration mode Parameters are used together for configuration mode Some special configurations of the environment corresponding to the parameters
dpr
number
No
Set screen definition
interactive
boolean
No
Chart interaction global switch, default is true.
viewBox
object
No
Specifies the rectangular Region to draw, such as { x1: 100, y1: 100, x2: 300, y2: 300 }
canvasControled
boolean
No
Used to tell the underlying rendering engine VRender whether the Canvas of the chart is a controlled canvas, and if not, no operations such as resize will be performed.
stage
Stage
No
External incoming VRender stage
layer
Layer
No
External incoming VRender layer
beforeRender
Function
No
Draw the previous hook function,(stage: IStage) => void
afterRender
Function
No
The hook function after drawing,(stage: IStage) => void
background
string\object
No
Drawing Region background color setting, you can configure gradual change color
logLevel
number
No
Log type for development and debugging
disableDirtyBounds
boolean
No
Whether to close dirtyBounds
enableView3dTransform
boolean
No
Whether to enable the transformation mode of view3d
poptip
boolean
No
Whether to enable poptip for omitting text, used to view the complete text content, enabled by default
resizeDelay
number
No
The interval duration in milliseconds for triggering a resize when automatically responding to container resize events; supported from 1.12.5.
srIOption3DType Types are defined as follows
LayoutCallBack Types are defined as follows:
example
attribute
ID
Read-only property, id of VChart instance, internally generated.
method
renderSync
synchronizationRender the chart.
renderAsync
Not recommended for use after version 1.9.0, asynchronous rendering/asynchronous update related APIs will be deprecated in the future.
asynchronousRender the chart.
updateData
asynchronousUpdate data. parameter id Corresponds in spec data attribute id Field, the chart will be automatically rendered without calling renderAsync() And other rendering methods.
updateDataInBatches
asynchronousBatch update data, the chart will be automatically rendered without calling renderAsync() And other rendering methods.
updateDataSync
synchronizationUpdate data. parameter id Corresponds in spec data attribute id Field, the chart will be automatically rendered without calling renderAsync() And other rendering methods.
updateFullData
Update data interface. The parameter is a complete data item configuration. You can update the fields configuration of the data through this interface. By default, the chart will be automatically rendered without calling rendering methods such as renderAsync().
updateFullDataSync
Sync Update data interface. The parameter is a complete data item configuration. You can update the fields configuration of the data through this interface. By default, the chart will be automatically rendered without calling rendering methods such as renderAsync().
updateSpec
asynchronousThe spec update will automatically render the chart without calling it again renderAsync() And other rendering methods.
updateModelSpec
asynchronous module spec update, you can specify to update the configuration of a chart module through filter, and the chart will be automatically rendered without calling rendering methods such as renderAsync().
updateViewBox
Update the drawing Region. viewBox is the drawing Region in the format { x1: number; x2: number; y1: number; y2: number }.
Resize
asynchronous method, the chart size update method.
Release
Destroy the chart.
On
Event binding. For more specific use, please move toEvent.
Off
Event unloading.
updateState
Update or set the primitive state.
The following example shows how to update the state filter when we click on a point in the graph, with this point type Points with different values become translucent, using an example:
setSelected
Update primitive selection status.
Set a set of data to the selected state, or you can directly set null to unselect the state.
setHovered
Update primitive hover status.
Set a data to hover Status, you can also directly set null to cancel hover Status.
setHovered Similar effect setSelected, supports setting multiple pieces of data to hover Status.
clearState
Clear the state of the marks
clearAllStates
Clear all states of the marks
clearSelected
clear the selected state of marks
clearHovered
clear the hovered state of marks
getCurrentTheme
Getting the current Theme will return the full Theme configuration.
getCurrentThemeName
Get the current Theme name (only get user pass setCurrentTheme Theme set by the method, the default value is ThemeManager Theme with unified settings).
setCurrentTheme
asynchronous method, set the current Theme.
setTooltipHandler
When the configuration item cannot meet the display needs of the tooltip, we also provide the ability to customize the tooltip. You can configure TooltipHandler To override the default tooltip presentation logic.
Note:
When customizing the chart is setTooltipHandlerAfter that, the built-in tooltip will no longer work.
VChart does not perceive or host custom tooltip rendering. Please implement tooltip rendering by yourself as needed, includingProcessing original data sources,Tooltip content design, andCreate components and style them according to the project environment.
The current is called when the chart is deletedTooltipHandlerofreleaseFunction, please delete as needed.
Due to customTooltipHandlerOverrides the built-in tooltip logic,chartspecSome tooltip configuration items inBut the following configuration items apply to all customizationsTooltipHandlerSee also:
tooltip.visible //TODO: Add tooltip spec link, currently tooltip does not have a special configuration item page
tooltip.activeType
tooltip.trigger
tooltip.triggerOff
ITooltipHandlerThe interface is defined as follows:
among themITooltipHandler.showTooltipThere are three parameters, the meanings are:
activeType: reveal the tooltip type triggered this time, the value is'mark'or'dimension'
data: reveal the tooltip original data source triggered this time
params: reveal the mouse event of the tooltip triggered this time
dataThe type of the parameter isTooltipData, the type is defined as:
If the user triggers the mark tooltip,TooltipData just for IDimensionData[] Type.IDimensionDataThe type is defined as:
And if the user triggers the dimension tooltip,TooltipData just for IDimensionInfo[] Type.IDimensionInfoCarrying the information of the entire Dimension item where the mouse is located, the type is defined as:
Users can choose to useITooltipHandler.showTooltipMethod returns a stateTooltipResult, used to indicate whether the tooltip is successfully displayed (if not returned, it will be regarded as successful by default). This return value is related to the caching policy.TooltipResultIs an enumeration type, defined as:
ITooltipHandler.showTooltipThe last parameter of the method isparams, whose type is defined as:
It exposes a very useful parameter:changePositionOnly,Indicates whether this tooltip is just that the previous tooltip has misappropriated the lower position, and the data is the sameThis parameter will help users optimize tooltip rendering
Example: Type the dimension item title and series mark fill where the user's mouse hovers.
getTooltipHandler
obtainTooltipHandler.
showTooltip
Manually invoke the display tooltip.
hideTooltip
Call manually, close tooltip
getLegendDataById
Get the legend data according to the legend component id, which comes from the spec legends Configured in the field idSuch as: legends: { id: 'bottom' } or legends: [{ id: 'left' }]
Legend data type:
getLegendDataByIndex
Get legend data according to the legend component index.
Legend data type:
getLegendSelectedDataById
Get the selected item of the current legend according to the legend component id, which comes from the spec legends Configured in the field idSuch as: legends: { id: 'bottom' } or legends: [{ id: 'left' }]
getLegendSelectedDataByIndex
Gets the selected item of the current legend according to the legend component index.
setLegendSelectedDataById
Update the legend selection data according to the legend component id from the spec legends Configured in the field idSuch as: legends: { id: 'bottom' } or legends: [{ id: 'left' }]
setLegendSelectedDataByIndex
Update the legend selection data according to the legend component index.
getDataURL
asynchronous methodReturns a data URI that contains the image display.
exportImg
asynchronous method Export chart images, only support browser side, and parameters at the same time name Pictures can be named.
exportCanvas
Exporting canvas with chart content is only supported on the browser side. You can use this canvas for secondary processing, such as adding watermarks, etc.
getImageBuffer
Currently only the node environment is supported for node-side image export.
setLayout
Set a custom layout.
reLayout
Force a relayout.
getCompiler
Get the compiler instance.
getChart
Get the Chart chart instance.
getStage
Get the rendering engine instance.
getCanvas
Get canvas dom.
getContainer
Gets the DOM container for the chart.
getComponents
Gets all component instances of the chart.
getDataSet
Support since version 1.10.4;
Gets a DataSet instance of the chart.
getScale
Gets a Scale instance of the chart
setDimensionIndex
Manually invoked to trigger the dimension interaction.
Obtain the corresponding chart coordinate position according to the data in the dataset. The data needs to be obtained from the dataset passed into the chart. If the data does not exist in the dataset, the convertValueToPosition method can be used.
convertValueToPosition
Convert the value to the corresponding canvas coordinate point.
updateIndicatorDataById
Update the indicator component data based on the component id specified in the spec.
updateIndicatorDataByIndex
Update the indicator component data based on the component index in the spec.
geoZoomByIndex
Map Zoom API. Specifies the geo coordinate of a region by index order for zooming.
geoZoomById
Map Zoom API. Specifies the geo coordinate of a region by id for zooming