1.6.1. 仪表盘图

使用 AngularGaugeChart 组件可以创建仪表盘图。

在线示例
gauge chart
Figure 14. 仪表盘图

该组件的 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 文档。