FusionCharts仪表盘关键属性详解

需积分: 10 55 浏览量更新于2024-09-14 收藏 5KB TXT 举报

本文将详细解析FusionCharts中仪表盘的重要属性，这些属性用于定义仪表盘的外观、颜色、刻度、指针以及各种视觉效果。在FusionCharts的仪表盘中，`<Chart>`标签包含了众多属性，用于定制仪表盘的样式和功能。以下是一些关键属性的说明： 1. `bgColor='FFFFFF'`: 这个属性定义了仪表盘的背景颜色，这里是纯白色。 2. `upperLimit='120'` 和 `lowerLimit='0'`: 分别表示仪表盘的最大值和最小值，这里的范围是从0到120。 3. `baseFontColor='666666'`: 设置基础字体颜色为深灰色。 4. `majorTMNumber='10'` 和 `minorTMNumber='5'`: 分别设置主要刻度线和次要刻度线的数量。主要刻度线有10条，次要刻度线有5条。 5. `majorTMColor='666666'` 和 `minorTMColor='666666'`: 主要和次要刻度线的颜色均为深灰色。 6. `majorTMHeight='8'` 和 `minorTMHeight='3'`: 定义了主要和次要刻度线的高度。 7. `pivotRadius='10'`: 仪表盘中心点（枢轴）的半径大小。 8. `showGaugeBorder='0'`: 是否显示仪表盘边框，这里设置为0表示不显示。 9. `gaugeOuterRadius='100'` 和 `gaugeInnerRadius='90'`: 仪表盘外圆半径和内圆半径，外圆是100%，内圆是90%。 10. `gaugeOriginX='170'` 和 `gaugeOriginY='170'`: 仪表盘的原点坐标，这里是(170, 170)。 11. `gaugeScaleAngle='220'`: 仪表盘的刻度角度，这里是220度。 12. `displayValueDistance='20'`: 显示值与仪表盘之间的距离。 13. `placeValuesInside='1'`: 值是否显示在仪表盘内部，1表示显示在内部。 14. `gaugeFillMix` 和 `pivotFillMix`: 控制仪表盘和枢轴填充的渐变颜色。 15. `pivotBorderColor='BEBCB0'` 和 `pivotfillRatio='80,50'`: 枢轴边框颜色和填充比例。 16. `showShadow='0'`: 是否显示阴影，这里设置为0表示不显示。此外，`<colorRange>`标签定义了颜色范围，比如绿色（代码'00FF00'）代表0到84的值，红色（代码'FF0000'）代表84到100的值，且红色部分的透明度为50%。 `<dials>`标签则设置了仪表盘的指针。在这个例子中，有一个指针，其初始值为50，边界颜色为红色，背景颜色有渐变，基部宽度为10，顶部宽度为3。最后，`<annotations>`标签允许添加注解元素，例如`<annotationGroup>`中的圆形注解，可以用来添加额外的图形效果，如圆环渐变。通过这些属性的调整，开发者可以创建出符合需求的、具有个性化视觉效果的仪表盘组件。

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

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

-------------------------仪表盘重要属性解析-----------------------
根节点<Chart 属性：
upperLimit='120' --刻度值上限
lowerLimit='0' --刻度值下限
Limits='0/1' --是否显示极限值
baseFontColor='#FF3333' --刻度值字体颜色
majorTMNumber='12' --需要将仪表盘分成的等份值
majorTMColor='#FF3333' --刻度线的颜色
majorTMHeight='8' --刻度线的长度
minorTMNumber='5' --仪表盘刻度线间小刻度线的数量
minorTMColor='#FF3333' --仪表盘刻度线间小刻度线颜色
minorTMHeight='5' --仪表盘刻度线间小刻度线长度

下载后可阅读完整内容，剩余3页未读，立即下载

Andy猪猪侠

粉丝: 36
资源: 11

FusionCharts仪表盘关键属性详解

FusionChartsFree 仪表盘属性解析

绘制仪表盘

fusionchart支持仪表盘

android 仪表盘控件

MPAndroidChart进度仪表盘

winform仪表盘控件自定义

使用ECHARTS完成仪表盘的制作

jfreechart 仪表盘

echarts 仪表盘 盘样式修改

matplotlib画仪表盘图

最新资源

echarts 仪表盘盘样式修改