zoukankan      html  css  js  c++  java
  • AngularGauge 属性解析(转载)

     1 <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'>
     2     <colorRange>
     3         <color minValue='0' maxValue='84' code='00FF00' alpha='0'/>
     4         <color minValue='80' maxValue='100' name='Danger' code='FF0000' alpha='50'/>
     5     </colorRange>
     6     <dials>
     7     <dial value='50' bordercolor='#FF3333' bgColor='bebcb0, f0efea, bebcb0' borderAlpha='0' baseWidth='10' topWidth='3'/>
     8     </dials>    
     9     <annotations>
    10         <annotationGroup xPos='170' yPos='170' fillRatio='10,125,254' fillPattern='radial' >
    11         <!-- Draw the upper White Rounded Border -->
    12             <annotation type='circle' xPos='0' yPos='0' radius='150' borderColor= 'bebcb0' fillAsGradient='1' fillColor='f0efea, bebcb0'  fillRatio='85,15'/>
    13             <annotation type='circle' xPos='0' yPos='0' radius='140' fillColor='bebcb0, f0efea' fillRatio='85,15' />
    14             <annotation type='circle' xPos='0' color='FFFFFF' yPos='0' radius='140' borderColor= 'f0efea' />
    15         </annotationGroup>
    16     </annotations>
    17 </Chart>


    -------------------------仪表盘重要属性解析-----------------------
    根节点<Chart 属性:
    upperLimit='120' --刻度值上限
    lowerLimit='0'   --刻度值下限
    Limits='0/1'     --是否显示极限值
    baseFontColor='#FF3333' --刻度值字体颜色
    majorTMNumber='12'  --需要将仪表盘分成的等份值
    majorTMColor='#FF3333'  --刻度线的颜色
    majorTMHeight='8'   --刻度线的长度
    minorTMNumber='5'  --仪表盘刻度线间小刻度线的数量
    minorTMColor='#FF3333' --仪表盘刻度线间小刻度线颜色
    minorTMHeight='5' --仪表盘刻度线间小刻度线长度
    pivotRadius='20' --针心圆半径
    showGaugeBorder='1' --是否显示刻度盘边框
    gaugeOuterRadius='130' --刻度盘外围半径
    gaugeInnerRadius='110' --刻度盘内围半径
    gaugeOriginX='170'  --刻度盘圆心X坐标
    gaugeOriginY='170'  --刻度盘圆心Y坐标
    gaugeScaleAngle='200' --刻度盘比例(度数)
    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>
    value='50'  --指针指示值
    borderAlpha='10' --指针边线的颜色深度
    baseWidth='10'   --只针的宽度
    topWidth='3'  --指针尖端的宽度
    仪表盘外围控件:
    <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'/>

     1 <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'>
     2    <colorRange>
     3       <color minValue='0' maxValue='45' code='FF654F'/>
     4       <color minValue='45' maxValue='80' code='F6BD0F'/>
     5       <color minValue='80' maxValue='100' code='8BBA00'/>
     6    </colorRange>
     7 
     8    <dials>
     9       <dial value='92' rearExtension='10'/>
    10    </dials>
    11 
    12    <trendpoints>
    13       <point value='50' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' />
    14    </trendpoints>
    15 
    16    <!--Rectangles behind the gauge -->
    17    <annotations>
    18       <annotationGroup id='Grp1' showBelow='1' >
    19          <annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' />
    20       </annotationGroup>
    21    </annotations>
    22 
    23    <styles>
    24       <definition>
    25          <style name='RectShadow' type='shadow' strength='3'/>
    26       </definition>
    27       <application>
    28          <apply toObject='Grp1' styles='RectShadow' />
    29       </application>
    30    </styles>
    31 </chart>


    -------------------------仪表盘重要属性解析-----------------------
    <chart
    numberSuffix='%25'  --数值后缀%
    chartTopMargin='25' --到容器顶端的距离
    chartBottomMargin='25' --到容器底端的距离
    chartLeftMargin='25' --到容器左端的距离
    chartRightMargin='25'  --到容器右端的距离
    gaugeFillRatio='11' --刻度盘背景颜色比例
    <annotationGroup showBelow='1'  --显示在XX下面     

  • 相关阅读:
    部署至Oracle数据库的注意事项
    当在centos上面部署项目时,mysql的一些驱动安装不上,
    drf利用redis做缓存是发生一点错误提示
    python字符串前面加个u代表什么
    在学习数据分析时,安装anaconda时遇到一点问题
    在使用scrapy框架爬取sina时,常见保存
    在linux上scrapyd部署scrapy项目时出现service_identity,并且不能识别其中的一个opentype模块
    如何在mysql增加一个和root权限一样的用户,安排
    mysq的root密码忘记,原来还有更优雅的解法
    mysql远程连接阿里云的Ubuntu服务器
  • 原文地址:https://www.cnblogs.com/ye512160243/p/3448178.html
Copyright © 2011-2022 走看看