zoukankan      html  css  js  c++  java
  • FusionCharts简单教程(三)-----FusionCharts的基本属性

          通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色、设置提示信息、设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比较详细的了解,只有了解了这些最基本的元素才能制作出我们想要的图像。

          FusionCharts的基本元素主要包括如下几个方面:图像背景和画布、图形标签、刻度线标签、提示信息、数据。

    一、图像背景和画布。

          这个标签类主要是用于设置图像的背景、边框和对整个画布进行设置。

    aaaa

    属性名称

    属性说明

    示例或说明

    bgColor

    背景颜色

    bgColor='999999,FFFFF渐变 bgColor=’999999’ 单色

    bgAlpha

    背景透明度

    设置范围在1-100

    showBorder

    图表外是否显示边框

    默认二维图表显示,三维不显示

    borderColor

    边框颜色

    十六进制表示去掉前面的#号

    borderThickness

    边框线的粗细

    像素表示

    borderAlpha

    边框透明度

    bgSWF

    背景图片或动画

    保证此图片和SWF文件在同一个文件夹

    bgSWFAlpha

    设置背景图片的透明度

          上面是对整个画布进行控制、设置,其实我们还可以对二维的图像进行设置,其中包括:背景图片、边框以及透明度。

    bbbbbb

    属性名称

    属性说明

    示例或说明

    canvasbgColor

    图表背景颜色

    可设置单色也可以使用梯度设置渐变色

    canvasbgAlpha

    图表背景透明度

    设置范围在1-100

    canvasBorderColor

    图表背景边框颜色

    canvasBorderThickness

    图表背景边框线粗细

    canvasBorderAlpha

    图表背景边框透明度

          对于透明度而已,它会随着值的变大而越不明显。下面是透明度为100和60的比较(注意边框的变化),

    ccccc

    二、图形标签

          图形标签主要是用于表现图像的数据轴、名称、字体等等及其相关的属性的设置。

    2.1图表名称

          通过图表的名称属性我们可以设置图形的名称、子名称、X、Y轴的名称。

    ffffff

    属性名称

    属性说明

    示例或说明

    caption

    标题

    subcaption

    子标题

    xAxisName

    X轴名称

    yAxisName

    Y轴名称

    rotateYAxisName

    Y轴名称是否旋转的显示

    rotateNames

    X轴名称是否旋转的显示

    slantLabels=’1’时,斜45度,否则斜90度竖排

    2.2字体属性

    属性名称

    属性说明

    示例或说明

    outCnvbaseFont

    Canvas外面的字体

    即标题、子标题、X/Y轴名称字体

    outCnvbaseFontSize

    Canvas外面的字体大小

    范围在0-72

    outCnvbaseFontColor

    Canvas外面的字体颜色

    baseFont

    Canvas里面的字体

    baseFontSize

    Canvas里面的字体大小

    baseFontColor

    Canvas里面的字体颜色

    2.3数据轴属性

    属性名称

    属性说明

    示例或说明

    showLabels

    是否显示X轴标签名称

    默认显示

    showYAxisValues

    是否显示Y轴标签名称

    默认显示

    numberPrefix

    Y轴数据加上前缀

    如numberPrefix = ‘a’

    numberSuffix

    Y轴数据加上后缀

    如numberPrefix = ‘b’

    formatNumberScale

    是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M

    formatNumberScale=’0’即可去除掉这个’k’

    labelDisplay

    标签显示格式

    WRAP(重叠)ROTATE(旋转)Stagger(交错)

    slantLabels

    标签旋转显示时的倾斜角度

    staggerLines

    标签交错显示时的交错行数

    labelStep

    横轴标签隔几个显示

    yAxisValuesStep

    纵轴标签隔几个显示

    yAxisMinValue

    Y轴坐标的最小值

    yAxisMaxValue

    Y轴坐标的最大值

    xAxisMinValue

    X轴坐标的最小值

    xAxisMaxValue

    X轴坐标的最大值

    2.4图例相关属性

    属性名称

    属性说明

    示例或说明

    showLegend

    是否显示图例说明

    默认显示

    legendPosition

    设置图例说明的位置

    legendBgColor

    设置图例说明的背景颜色

    legendBgAlpha

    设置图例说明的背景透明度

    legendBorderColor

    设置图例说明的边框颜色

    legendBorderThickness

    设置图例说明的边框粗细

    legendBorderAlpha

    设置图例说明的边框透明度

    legendShadow

    是否显示为图例说明显示阴影

    legendScrollBgColor

    设置图例说明滚动条的背景颜色

    当图例说明中有很多事件时

    legendScrollBarColor

    设置图例说明滚动条的颜色

    当图例说明中有很多事件时

    egendScrollBtnColor

    设置图例说明滚动条的按钮的颜色

    当图例说明中有很多事件时

    2.53D图表属性

    属性名称

    属性说明

    示例或说明

    view2D()

    以二维的形式显示

    3D图表已有的方法接口

    view3D()

    以三维的形式显示

    3D图表已有的方法接口

    resetView()

    重置,恢复到原先的角度

    3D图表已有的方法接口

    rotateView(x,y)

    旋转到所选的角度

    3D图表已有的方法接口

    getViewAngles()

    获得当前图表所处的横纵角度

    var a=getViewAngles();

    alert(a.xAng); alert(a.yAng);

    cameraAngX

    设置图表角度(横轴角度)

    0 to 360/0 to -360默认为30度

    cameraAngY

    设置图表角度(纵轴角度)

    0 to 360/0 to -360默认为-45度

    startAngX

    设置图表开始的角度(横轴角度)

    0 to 360/0 to -360

    endAngX

    设置图表结束的角度(横轴角度)

    0 to 360/0 to -360

    startAngY

    设置图表开始的角度(纵轴角度)

    0 to 360/0 to -360

    endAngY

    设置图表结束的角度(纵轴角度)

    0 to 360/0 to -360

    dynamicShading

    是否设置光源影响

    lightAngX

    设置光源的角度(横轴角度)

    0 to 360/0 to -360

    lightAngY

    设置光源的角度(纵轴角度)

    0 to 360/0 to -360

    YZWallDepth

    设置yz面的深度

    ZXWallDepth

    设置zx面的深度

    XYWallDepth

    设置xy面的深度

    clustered

    图表是否嵌入显示

    默认前后重叠显示

    三、刻度线

          在刻度线标签中我们可以设置零平面、刻度线和趋势线。

    gggggg

    3.1零平面

    属性名称

    属性说明

    示例或说明

    zeroPlaneColor

    设置零线(面)的颜色

    zeroPlaneThickness

    设置零线(面)的粗细

    zeroPlaneAlpha

    设置零线(面)的透明度

    zeroPlaneShowBorder

    是否显示零面的外框

    只针对3D图表

    zeroPlaneBorderColor

    设置零面外框的颜色

    只针对3D图表

    3.2刻度线

    属性名称

    属性说明

    示例或说明

    divLineColor

    设置div的颜色

    divLineThickness

    设置div的线条粗细

    1-5

    divLineAlpha

    设置div的线条透明度

    1-100

    divLineIsDashed

    设置div是否虚线显示

    showAlternateHGridColor

    设置div块是否高亮显示

    vDivLineColor

    设置垂直div的颜色

    vDivLineThickness

    设置垂直div的线条粗细

    vDivLineAlpha

    设置垂直div的线条透明度

    vDivLineIsDashed

    设置垂直div是否虚线显示

    showAlternateVGridColor

    设置垂直div块是否高亮显示

    alternateVGridAlpha (透明度)

    hhhhhh

         上面图像将零平面颜色设置为绿色、刻度线颜色为白色、粗细为1、虚线显示(如果虚线实现,粗细最好<=2否则就不清晰)。

    3.3趋势线

    属性名称

    属性说明

    示例或说明

    dashed

    是否虚线显示

    默认实线显示

    dashLen

    设置虚线长度

    dashGap

    设置虚线间隙宽度

    startValue

    起始值

    单个时一条横线,有结束值时,两点连线

    endValue

    结束值

    displayvalue

    线标示

    valueOnRight

    设置displayvalue显示右边

    valueOnRight ='1'

    color

    设置线颜色

    四、提示信息

          当我们将鼠标放在某快数据区域的时候,提示信息就会显示相应的提示内容,包括数据、所属“单位”、以及一些用户设置的信息。通过如下几个属性我们定制自己的提示信息。

    jjjjjj      kkkkkk

    属性名称

    属性说明

    示例或说明

    showToolTip

    鼠标放上去是否显示提示

    Set属性里可自定义设置toolText

    toolText

    自定义提示框显示的内容

    toolTipBorderColor

    提示框边框的颜色

    toolTipBgColor

    提示框背景颜色

    五、数据格式

    decimals

    设置小数点后面保留的位数

    forceDecimals

    是否强制保留小数点后面的decimals设置的位数

    formatNumberScale

    是否按默认的数据格式显示

    decimalSeparator

    小数点的分隔表示方式

    默认‘.’

    thousandSeparator

    千分位的分隔表示方式

    默认‘,’

    numberScaleValue

    两个联合一起使用,定义数据标度

    numberScaleValue='1000,1000,1000'

    numberScaleUnit

    numberScaleUnit='K,M,B'

    numberPrefix

    数字显示的前缀

    numberPrefix='$'

    numberSuffix

    数字显示的后缀

  • 相关阅读:
    wenti
    vim
    在两种情况下设备与驱动会发生匹配
    用Qt图形视图框架开发拼图游戏
    Android RecyclerView添加Header头部
    Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果
    Java 集合深入理解(4):List<E> 接口
    你们公司有职业通路图吗
    linux系统性能监控--内存利用率
    linux系统性能监控--CPU利用率
  • 原文地址:https://www.cnblogs.com/chenssy/p/3263482.html
Copyright © 2011-2022 走看看