Gradient Column Chart

  • Last update:December 26, 2024
  • Overview

    Version

    Report Server Version

    11.0

    Application Scenario

    • The following figure shows the gradient effect for all the columns.

     image 2.png

    • The following figure shows the gradient effect for each column.

    image 3.png

    • The following figure shows the gradient effect for multiple series.

    image 4.png

    Function Description

    Choose Cell Element > Style > Series and set Gradient Style in Color, as shown in the following figure.

    image 1.png

    • Auto: Automatically set the gradient style based on the color scheme of the series.

    • Custom: You can click the icons on the left and right to customize the colors of the gradient left and right intervals.

    • Off: Cancel the gradient style, and the column colors will be displayed completely based on the color scheme.

    Gradient Column Chart

    Data Preparation

    Create a database query dataset named ds1 and enter the SQL statement SELECT * FROM Sales_Volume.

    image 5.png

    Chart Insertion

    Merge required cells, and insert a column chart, as shown in the following figure.

    image 6.png

    Data Binding

    Bind the data to the column chart, as shown in the following figure.

    image 7.png

    Title Setting

    Choose Style > Title on the Cell Element configuration panel and set Text, Position, and Character, as shown in the following figure.

    image 8.png

    Gradient Effect Setting

    Choose Style > Series on the Cell Element configuration panel, select Custom for Gradient Style, and use the default style, as shown in the following figure.

    image 1.png

    Effect Display

    PC

    Save the report and click Pagination Preview. The following figure shows the preview effect.

    image 2.png

    Mobile Terminal

     微信图片_20241226122634.jpg

    Gradient Chart for Each Column

    Prepare the data, insert the chart, and bind the data following the steps above.

    Title Setting

    Choose Style > Title on the Cell Element configuration panel and set Text, Position, and Character, as shown in the following figure.

    image 8.png

    Gradient Effect Setting

    1. Set the gradient color for the first column. Choose Special Effect > Condition Display on the Cell Element configuration panel, add Condition Attribute, select Color for Attribute, customize the color for Gradient, and set Common Condition to Category Index Equal to 1, as shown in the following figure.

    image 10.png

    2. Similarly, set the gradient color for the second column, with Common Condition being Category Index Equal to 2, as shown in the following figure.

    image 11.png

    Effect Display

    PC

    Save the report and click Pagination Preview. The following figure shows the preview effect.

    image 3.png

    Mobile Terminal

    微信图片_20241226122642.jpg

    Multi-Series Gradient Chart

    Data Preparation

    Create a database query dataset named ds1 and enter the SQL statementSELECT * FROM Sales_Volume.

    image 12.png

    Chart Insertion

    Merge required cells, and insert a column chart, as shown in the following figure.

    image 6.png

    Data Binding

    Bind the data to the column chart, as shown in the following figure.

    image 13.png

    Title Setting

    Choose Style > Title on the Cell Element configuration panel and set Text, Position, and Character, as shown in the following figure.

    image 14.png

    Gradient Effect Setting

    1. Set the gradient color for the first series. Choose Special Effect > Condition Display, add Condition Attribute, select Color for Attribute, customize the color for Gradient, and set Common Condition to Series Index Equal to 1, as shown in the following figure.

    image 15.png

    2. Similarly, set the gradient color for the second series, with Common Condition being Series Index Equal to 2, as shown in the following figure.

    image 16.png

    Effect Display

    PC

    Save the report and click Pagination Preview. The following figure shows the preview effect.

    image 4.png

    Mobile Terminal

    微信图片_20241226122644.jpg

    Template Download

    Gradient Column Chart

    For details, you can click to download the template Gradient Column Chart.cpt.

    Gradient Chart for Each Column

    For details, you can click to download the template Gradient Chart for Each Column.cpt.

    Multi-Series Gradient Chart

    For details, you can click to download the template Multi-Series Gradient Column Chart.cpt.

     


    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy