AngularGaugeChart

The AngularGaugeChart component allows you to create gauge charts.

gauge chart
GaugeChart

Component’s XML name: chart:gaugeChart

Elements

  • arrows - includes the nested arrow elements for the chart arrow axes.

    <chart:arrows>
        <chart:arrow value="60"/>
    </chart:arrows>
  • axes - includes the nested axis elements for the chart axes.

    <chart:axes>
        <chart:axis axisAlpha="0.2"
                    axisThickness="1"
                    bottomText="60 km/h"
                    bottomTextYOffset="-20"
                    endValue="220"
                    tickAlpha="0.2"
                    valueInterval="20">
        </chart:axis>
    </chart:axes>

    The band element enables you to split an axis into several bands (as in the picture above):

    <chart:axes>
        <chart:axis axisAlpha="0.2"
                    axisThickness="1"
                    bottomText="60 km/h"
                    bottomTextYOffset="-20"
                    endValue="220"
                    tickAlpha="0.2"
                    valueInterval="20">
            <chart:bands>
                <chart:band color="#84b761"
                            endValue="90"
                            startValue="0"/>
                <chart:band color="#fdd400"
                            endValue="130"
                            startValue="90"/>
                <chart:band color="#cc4748"
                            endValue="220"
                            innerRadius="95%"
                            startValue="130"/>
            </chart:bands>
        </chart:axis>
    </chart:axes>

    The endValue and startValue attributes are used to set the range of values on the chart, the valueInterval attribute defines the gauge scale marks.

Events and Handlers

Чтобы сгенерировать заглушку слушателя в Jmix Studio, выберите компонент в XML-дескрипторе экрана или на панели Component Hierarchy и используйте вкладку Handlers панели Component Inspector.

В качестве альтернативы вы можете воспользоваться кнопкой Generate Handler на верхней панели контроллера экрана.

For more details, see AmCharts documentation.