VChart Progressive Rendering Tutorial

In this tutorial, we will introduce how to use the progressive rendering feature in the VChart chart library. Progressive rendering can help you optimize chart performance when dealing with large amounts of data. Please make sure you have a basic understanding of the VChart chart library before learning this tutorial.

What is Progressive Rendering

Progressive rendering is a technique for improving chart performance, which can effectively reduce stutter and rendering time when processing large amounts of data. The progressive rendering feature in the VChart chart library depends on the configuration items in the chart's elements. For example, it can be configured in a bar chart like this:

• barChart.largeThreshold: The threshold to enable large data rendering optimization
• barChart.progressiveStep: The length of the partition
• barChart.progressiveThreshold: The threshold to enable partitioned rendering

Background Knowledge

During the chart drawing process, processing and rendering large amounts of data may consume more CPU and GPU resources, resulting in stutter or longer rendering response time. Using progressive rendering technology, data can be processed and rendered in partitions, balancing resource consumption and improving chart display effects.

How to Declare Progressive Rendering

In the VChart chart library, declaring progressive rendering requires setting related configuration items in the corresponding chart elements. Here's an example of using progressive rendering.

{
  "barChart": {
      "largeThreshold": 2000,
      "progressiveStep": 500,
      "progressiveThreshold": 8000
  }
}

Let's explain these configuration items one by one.

barChart.largeThreshold

largeThreshold is a numeric value representing the threshold to enable large data rendering optimization. When the data length exceeds this threshold, VChart will automatically enable large data optimization.

In this example, we set largeThreshold to 2000, which means that when the data length exceeds 2000, large data rendering optimization is enabled.

It is recommended to set the largeThreshold value less than progressiveThreshold.

barChart.progressiveStep

progressiveStep is a numeric value representing the partition length. During the rendering process, data will be divided into multiple segments (partitions). Each partition contains progressiveStep data points.

In this example, we set progressiveStep to 500, meaning each partition contains 500 data points.

barChart.progressiveThreshold

progressiveThreshold is a numeric value representing the threshold to enable partitioned rendering. When the single-series data length exceeds this threshold, VChart will automatically enable partitioned rendering.

In this example, we set progressiveThreshold to 8000, which means that when the single-series data length exceeds 8000, partitioned rendering is enabled.

Examples

Enable Progressive Rendering in Bar and Line Combination Chart

Use Progressive Rendering in Area Chart

Enable Progressive Rendering in Box Plot

Conclusion

Through this tutorial, you should have learned how to use the progressive rendering feature in the VChart chart library. Correctly setting related configuration items can optimize chart performance when dealing with large amounts of data, and improve user experience. Of course, you can further explore more advanced features and techniques in the VChart official documentation. Enjoy using it!