VChart 1.12.10
Tutorials
Contributing
Options
API
FAQ
Themes 🌼
Changelogs
Online Customization
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=Indicator Card——VisActor/VChart tutorial documents!!!###!!!!!!###!!!description=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 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 and Example pages.

Composition

Indicator Card (Indicator) is mainly composed of the following parts:

  • Title: Used to display the main information of the card.
  • Content: Used to display the detailed data of the indicator card.
  • Interaction Trigger: Used to configure the triggering method of indicator card updates.

Interaction

The Indicator Card (Indicator) component provides interactive capabilities. With different chart elements hovered or clicked by the user, the content of the indicator card can be dynamically updated. By configuring the triggering method, you can customize the changes of the indicator card when the chart elements are hovered or clicked by the mouse.

{
  indicator: {
    trigger: 'hover',
  }
}

Examples

Pie Chart with Indicator Card

In this example, we used the indicator configuration to implement the indicator card component. Now let's analyze the details of this configuration:

  • visible: true: The indicator card is visible.
  • trigger: 'hover': Specifies to update the data of indicator card when the mouse hovers over the chart.
  • limitRatio 0.4: Specifies the maximum width of the indicator card as a ratio of the entire pie chart width.
  • title object: The title of the indicator card. In this:
    • visible: true: Specifies that the title is visible.
    • autoFit true: Specifies that the title automatically adapts to the width of the indicator card.
    • style object: Configure the title style, including font, color, etc.
    • text anonymous function: Dynamically generate the title text.
  • content array: Configure the content of the indicator card. In this:
    • visible: true: Specifies that the content is visible.
    • style object: Configure the content style, including text content, font, color, etc.
    • text anonymous function: Dynamically generate the content text based on data.

With the above configuration, we successfully created a pie chart with an indicator card. Below is an example image of the actual effect of the pie chart: