在Flex几个通用Chart图形中画指定值的线条(指定刻度的线条)
问题来源:业务上要为Flex ColumnChart中画出一个以0这刻度的临界线。
问题分析:但是对Chart的backgroundElements中默认是GridLines,没有可用的用于指定刻度的线条,于是自己加了个HRule对象。
问题解决:加入HRule,设置它不同于GridLines的颜色,当然可以通过strokeWidth设置它的宽度,默认是2px,最重要的是设置它的位置。如下详细分析:
算出刻度的最大值和最小值:
va.minimum = 38.6
va.maximum = 41.400000000000006
算出所画容器的高度:
Father componnet height = 475
想像图:
于是分析得到如下位置计算公式:
y="{(((axis_score.maximum + axis_score.minimum) / 2 - 0) / (axis_score.maximum - axis_score.minimum)) * cs_3.height}"
关键解决代码:
问题推广:本文只设计了HRule是横向的线条,同理,可以很方便设计出纵向的线条,可以指定在哪一个值的刻度线或叫作临界线,当然还可以添加多条指定值的线。
可以运行的Demo代码:
Demo效果图:
后记:
后来在编译时又发现了如下的警告:
Data binding will not be able to detect assignments to "maximum"
而且在实际动态处理数据时确实没有实时刷新过来。
我查看了LinearAxis类中的代码,发现maximum有get和set方法,是对computedMaximum进行处理,于是我直接写成:
y="{(((axis_score.computedMaximum + axis_score.computedMinimum) / 2 - 0) / (axis_score.computedMaximum - axis_score.computedMinimum)) * cs_3.height}"
但编译器还是报了同样的错误,这是因为我们在处理对LinearAxis对象加了[Bindable]还不够,还要在其定义的时候加入[Bindable],这样我只好要自己写一个继承LinearAxis类的子类。
但是我又不想这样,于是我写了个很笨的方法,那就是加了一个定时器,定时刷新LinearAxis对象的y偏移量,于是增加了如下代码:
在应用程序初始化时加入如下代码:
并增加了如下定时刷新函数:
当然,我为那条横线增加了一个id属性,名字就叫做zeroLineHRule,如下代码所示: