AngularGauge property analysis detailed explanation

<Chart bgColor='FFFFFF' upperLimit='120' lowerLimit='0' baseFontColor='666666' majorTMNumber='10' majorTMColor='666666' majorTMHeight='8' minorTMNumber='5' minorTMColor='666666' minorTMHeight='3' pivotRadius='10' showGaugeBorder='0' gaugeOuterRadius='100' gaugeInnerRadius='90' gaugeOriginX='170' gaugeOriginY='170' gaugeScaleAngle='220' displayValueDistance='20' placeValuesInside='1' gaugeFillMix='' pivotFillMix='{F0EFEA}, {BEBCB0}' pivotBorderColor='BEBCB0' pivotfillRatio='80,50' showShadow='0'>
  <colorRange>
    <color minValue='0' maxValue='84' code='00FF00' alpha='0'/>
    <color minValue='80' maxValue='100' name='Danger' code='FF0000' alpha='50'/>
  </colorRange>
  <dials>
  <dial value='50' bordercolor='#FF3333' bgColor='bebcb0, f0efea, bebcb0' borderAlpha='0' baseWidth='10' topWidth='3'/>
  </dials>  
  <annotations>
    <annotationGroup xPos='170' yPos='170' fillRatio='10,125,254' fillPattern='radial' >
    <!-- Draw the upper White Rounded Border -->
      <annotation type='circle' xPos='0' yPos='0' radius='150' borderColor= 'bebcb0' fillAsGradient='1' fillColor='f0efea, bebcb0' fillRatio='85,15'/>
      <annotation type='circle' xPos='0' yPos='0' radius='140' fillColor='bebcb0, f0efea' fillRatio='85,15' />
      <annotation type='circle' xPos='0' color='FFFFFF' yPos='0' radius='140' borderColor= 'f0efea' />
    </annotationGroup>
  </annotations>
</Chart>

--------------------------------------------------------------------------------------------------------------------------------

Root node <Chart attribute:
upperLimit='120' --Upper limit of scale value
lowerLimit='0'   --The lower limit of the scale value
Limits='0/1'    --Whether to display the limit value
baseFontColor='#FF3333' --Scale value font color
majorTMNumber='12' --The equal value that needs to be divided into
majorTMColor='#FF3333' --The color of the tick
majorTMHeight='8'   --Length of the tick
minorTMNumber='5' --The number of small ticks between the dashboard ticks
minorTMColor='#FF3333' --The color of small ticks between the scales of the instrument panel
minorTMHeight='5' --The length of small ticks between the scale lines of the instrument panel
pivotRadius='20' -- radius of the center circle
showGaugeBorder='1' -- Whether to display the dial border
gaugeOuterRadius='130' -- Dial peripheral radius
gaugeInnerRadius='110' --Dial inner radius
gaugeOriginX='170' --Dial Center X Coordinate
gaugeOriginY='170' --Dial Center Y coordinate
gaugeScaleAngle='200' -- Dial ratio (degree)
displayValueDistance='20' --Display value and tick mark distance
placeValuesInside='1' --Show whether the value is inside the dial
gaugeFillMix='' --Whether the dial color is mixed
pivotFillMix='{F0EFEA}, {BEBCB0}' --Is the instrument panel axis mixed
pivotBorderColor='BEBCB0' -- Axis border color
pivotfillRatio='80,50' --Axial ratio
showShadow='0' -- Whether to display shadows

Color range:

The principle and application of this node:

Two different colors are spliced into the dial background color, which can be used to remind and indicate to a certain area;

Turntable:

value='50' --Pointer indicates value
borderAlpha='10' --The color depth of the pointer edge
baseWidth='10' --The width of the needle only
topWidth='3' --Width of pointer tip

Dashboard peripheral controls:

<annotations>
 <annotationGroup xPos='170' yPos='170' fillRatio='225,225,254' fillPattern='radial' Alpha='11' >
 <annotation type='circle' xPos='0' yPos='0' radius='150' borderColor= 'bebcb0' fillAsGradient='1' fillColor='f0efea, bebcb0' fillRatio='85,15'/>
 <annotation type='circle' xPos='0' yPos='0' radius='140' fillColor='bebcb0, f0efea' fillRatio='85,15' />
 <annotation type='circle' xPos='0' yPos='0' radius='140' borderColor= 'f0efea' color='FFFFFF'/>

<chart bgAlpha='0' bgColor='FFFFFF' lowerLimit='0' upperLimit='100' numberSuffix='%25' showBorder='0' basefontColor='FFFFDD' chartTopMargin='25' chartBottomMargin='25' chartLeftMargin='25' chartRightMargin='25' toolTipBgColor='80A905' gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3'>
  <colorRange>
   <color minValue='0' maxValue='45' code='FF654F'/>
   <color minValue='45' maxValue='80' code='F6BD0F'/>
   <color minValue='80' maxValue='100' code='8BBA00'/>
  </colorRange>

  <dials>
   <dial value='92' rearExtension='10'/>
  </dials>

  <trendpoints>
   <point value='50' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' />
  </trendpoints>

  <!--Rectangles behind the gauge -->
  <annotations>
   <annotationGroup id='Grp1' showBelow='1' >
     <annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' />
   </annotationGroup>
  </annotations>

  <styles>
   <definition>
     <style name='RectShadow' type='shadow' strength='3'/>
   </definition>
   <application>
     <apply toObject='Grp1' styles='RectShadow' />
   </application>
  </styles>
</chart>

--------------------------------------------------------------------------------------------------------------------------------

<chart
numberSuffix='%25' --numeric suffix%
chartTopMargin='25' --Distance to the top of the container
chartBottomMargin='25' --Distance to the bottom of the container
chartLeftMargin='25' --Distance to the left end of the container
chartRightMargin='25' --Distance to the right end of the container
gaugeFillRatio='11' -- Dial background color ratio
<annotationGroup showBelow='1' --Showed under XX

The above is a compilation of AngularGauge attribute information. We will continue to add relevant information in the future. Thank you for your support for this website!