DOCSEARCHbyAlgolia
Submit Docs

VChart Documentation

repository·develop·Indexed 23 days ago

https://github.com/visactor/vchart

A cross-platform charting library and data storytelling tool within the VisActor visualization system. VChart adapts to desktop, H5, and multiple mini-program platforms, including specialized support for Feishu components and HarmonyOS/OpenHarmony (via @visactor/harmony-vchart). The library provides API references, configuration options, themes, and tutorials for creating interactive data visualizations.

Tokens
930.5K
Snippets
1.7K
Records
3.3K
Agent score
82%

What's inside VChart

  1. Introduction to Sankey Diagrams in VChart

    develop

    Sankey diagrams in VChart are used to visualize flows, energy, materials, or other resources in complex systems using a directed acyclic graph (DAG) structure.

    Key characteristics include:

    • Nodes: Represent states or events. Their size and color are typically proportional to their importance or value.
    • Edges (Links): Represent flows between nodes. Their width is proportional to the associated values and they often include directional arrows.
    • Use Cases: Traffic analysis, energy management, and material tracing.

  2. Overview of @visactor/openinula-vchart

    develop

    @visactor/openinula-vchart is a wrapper version of the VChart library provided by VisActor for the Openinula environment. It provides a series of easy-to-use Openinula components for creating various types of charts, such as line charts, bar charts, pie charts, and radar charts.

    Key features include:

    • Ease of Use: Quick creation of various chart types via Openinula components.
    • High Customizability: Components can be highly customized by passing different parameters and configurations.
    • Extensibility: Easy to extend and add new features.
    • Compatibility: Inherits full VChart visualization capabilities and runs on different browsers and devices.
    • VChart Alignment: Capabilities and API configurations are almost identical to VChart.

  4. VChart API Overview by Category

    develop

    VChart APIs are categorized based on their functional purpose to help you manage different aspects of a chart's lifecycle:

    • Data Operations: Dynamically update chart data (refreshing, real-time data, filtering).
    • Chart Updates: Modify chart configurations (switching chart types, styles, or titles).
    • State Management: Control visual states of elements (highlighting, selection, hover effects).
    • Event Listening: Respond to user interactions (clicks, hovers, legend filtering).
    • Theme Switching: Dynamically change themes (e.g., switching to dark mode).
    • Interaction Control: Manually trigger interactions (showing/hiding tooltips or crosshairs).
    • Exporting: Export charts as images or data URLs.
    • Layout & Sizing: Handle responsive layouts and container resizing.
    • Legend Operations: Control legend selection and data.
    • Animation Control: Manage animation playback (pause, resume, stop).
    • Coordinate Conversion: Convert between data values and visual positions.
    • Instance Access: Retrieve internal instances like chart, stage, or canvas.

  5. Explore VChart documentation and examples

    develop

    The VChart documentation site is organized into several key directories containing API references, configuration options, themes, and examples. You can find specific information in the following locations:

    • API Interface Documents: Located in assets/api/ (available in English en and Chinese zh).
    • Chart Examples: Located in assets/examples/ (available in English en and Chinese zh).
    • Configuration Options: Detailed documentation for configuration items is in assets/options/ (available in English en and Chinese zh).
    • Themes: Default and dark themes are located in assets/themes/.
    • Tutorials: Step-by-step guides are in assets/tutorials/ (available in English en and Chinese zh).
    • Demos: Interactive demos are located in assets/demos/.

  6. Locate VChart documentation and examples

    develop

    VChart documentation, API references, configuration options, and chart examples are organized within the assets directory of the documentation site.

    • API Documentation: Found in assets/api (supports en and zh).
    • Chart Examples: Found in assets/examples (supports en and zh).
    • Configuration Options: Found in assets/options (supports en and zh).
    • Tutorials: Found in assets/tutorials (supports en and zh).
    • Themes: Found in assets/themes (includes dark and light themes).
    • Demos: Found in assets/demos.

  8. Use @visactor/react-vchart for React applications

    develop

    @visactor/react-vchart is a React wrapper for the VChart library. It provides easy-to-use React components for creating various chart types such as line, bar, pie, and radar charts within a React environment.

    Key characteristics:

    • API Alignment: The API configuration is almost identical to the core VChart library. For detailed chart definitions and configuration schemas, refer to the VChart documentation.
    • Customizability: Components are highly customizable via parameters and configurations inherited from VChart.
    • Compatibility: It fully inherits VChart's visualization capabilities and supports various browsers and devices.

  10. What is Rich Text in VChart and which components support it?

    develop

    Starting from v1.10.0, VChart supports rich text capabilities, allowing you to mix text styles, images, and specific layouts within text elements.

    Supported components include:

    • Label component
    • Axis component: axis labels, axis titles
    • Discrete legend component: legend text, legend title
    • Annotation component: annotation text
    • Indicator card component
    • Custom graphic element: rich text element
    • Canvas tooltip component: title and content lines

  11. What is DataZoom and how does it work?

    develop

    DataZoom is a filtering slider component in VChart that allows users to zoom and roam through chart data. It improves data visibility and interactivity by providing a UI element (typically a slider) that controls the visible range of the data.

    Users can interact with the DataZoom component by:

    • Dragging the slider handles (startHandler, endHandler).
    • Selecting a range from the background layer.
    • Using the middle handle (middleHandler) if available.

    The component is composed of several visual elements including backgrounds, handles, text labels, and a preview chart (thumbnail axis) that shows a miniature version of the data to provide context for the current zoom level.