2.5.1. 仪表盘图
使用 AngularGaugeChart
组件可以创建仪表盘图。
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 文档。