2.5.1. AngularGaugeChart

Компонент AngularGaugeChart позволяет вам создать диаграмму-спидометр.

ДЕМОНСТРАЦИЯ
gauge chart
Рисунок 14. GaugeChart

XML-имя компонента: chart:gaugeChart.

Элементы chart:gaugeChart:

  • arrows – содержит вложенные элементы arrow со стрелками осей.

    <chart:arrows>
    <chart:arrow value="60"/>
</chart:arrows>

  • axes – содержит вложенные элементы axis для осей диаграммы.

    <chart:axes>
    <chart:axis id="blue"
                axisColor="#67b7dc"
                axisThickness="3"
                gridInside="false"
                inside="false"
                radius="100%"
                valueInterval="20"
                tickColor="#67b7dc"/>
    <chart:axis labelsEnabled="true"
                axisColor="#fdd400"
                axisThickness="3"
                endValue="160"
                radius="80%"
                valueInterval="20"
                tickColor="#fdd400"/>
</chart:axes>

    Элемент band позволяет разделить ось на несколько полос, как на изображении выше:

    <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>

    Атрибуты endValue и startValue определяют диапазон значений на шкале диаграммы, атрибут valueInterval задаёт шаг деления шкалы.

Слушатели событий AngularGaugeChart:

  • ChartClickListener – щелчок по холсту.

  • ChartRightClickListener – щелчок по холсту правой клавишей мыши.

Для более подробной информации об этом типе диаграмм смотрите документацию AmCharts.