Successfully!

Error!

Chart Interaction

  • Last update:  2020-12-09
  • I. Overview

    1) The chart interaction is a special effect chart, which refers to the use of webpage language such as information prompt, highlighting and animation to convey information.

    2) The chart interaction setting includes six parts: toolbar, Animation, Axis, Chart Zoom, Monitor Refresh, and Hyperlink. This document focuses on the interaction of toolbar, animation and axis, and the rest are described in detail in other documents in Chart Interaction.

     图片1.png

    You will learn
    • Toolbar

    • Animation

    • Axis

    II. Toolbar

    Chart toolbar refers to the toolbar displayed in the upper right corner of the chart when previewing the chart.

     图片2.png

    Double-click the Chart in the Designer, and select [Special Effect] > [Interaction] on the right. There are four settings in the [Toolbar]: Sort, Export Image, Full Screen Display, and Collapse to Menu:

     图片3.png

    • Sort: when checked, the toolbar displays the Sort button, which can realize the sorting function; if unchecked, the sorting function will not be displayed.

        Note:

      • Charts and graphs are sorted according to the sum of actual values under each category (except multi-layer pie charts, which are sorted according to absolute values).

      • In case of multi-category axis, the sorting will be conducted under each major category according to the sum of actual values of bottom categories.

      • Sorting is supported for column chart, bar chart, line chart, area chart, pie chart, gauge chart and radar chart.

     1.gif

    • Export Image: when checked, the toolbar displays the Export Image button, and the chart can be exported as an image; if unchecked, the export function will not be displayed.

     2.gif

    • Full Screen Display: when checked, the toolbar displays the Full Screen Display button, after clicking it, the chart can be viewed in full screen; if unchecked, the full screen function will not be displayed.

        Note:

      • The background color of the full screen chart is consistent with the set background color of the chart area.

      • The full screen effect is the initial loading effect of the current chart.

     3.gif

    • Collapse to Menu: if checked, the toolbar options will collapse to the Menu button first. If unchecked, all toolbar options will be displayed directly.

    4.gif

    Note:

    • When none of Sorting, Export Image and Full Screen Display is checked, the Toolbar will not be displayed during preview.

    • H5 does not support Toolbar at present, and the native mobile terminal currently only supports the Sorting function.

    III. Animation

    The animation effects of chart include initial drawing animation, monitoring refresh animation, linked filtering drawing animation, legend interaction animation and chart zooming.

    Double-click the Chart in the Designer, and select [Special Effect] > [Interaction] on the right side to set the animation effect [On] or [Off]. When set off, the animation effect of the chart will not be displayed.

    5.gif

    IV. Axis

    Double-click the Chart in the Designer, and select [Special Effect] > [Interaction] on the right side to set the axis reversal [On] or [Off]. After reversal, the direction of the axis will change.

     6.gif

    Note: Axis reversal function is supported only for bubble chart, scatter plot, line chart, shape chart, column chart, combination chart and area chart.


    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback