分类
Javascript

使用HTML5 Canvas绘制简单图表

HTML5 canvas最流行的应用之一是绘制图表。我们将用一个很简单的例子,讲述如何在画布上绘制图表。明白这些基本概念后再进一步深化,就可以使我们的图形功能更灵活。

下面是我们简单绘制图表的步骤:

  • 创建2D画布context对象
  • 绘制X轴
  • 绘制Y轴
  • 基于数据绘制路径
分类
Flash

Flex 4.5 Chart组件的一个严重Bug

我一直以来是Flex Chart的终实用户。Flex 4.5 Chart 组件修正了不少Flex 4.0 Chart 组件中的不少Bug,比如时间轴问题,笔触样式问题,Chart与其它数据可视化组件分开了,而且还新增了labelClass样式。遗憾的是,我今天发现了一个很严重的Bug,希望Flex SDK Team能在Flex 5中修正一下。

分类
Flash

彻底隐藏Flex Chart中的Series

通常,如果Chart中已经有多个Series,我们一般不会直接删除Series,最好将它隐藏,再次需要时直接显示而不是重新请求数据添加。是不是将Series的visible属性设置成false就行了?并非如此,Series是可以隐藏但轴没有更新。

http://flexdevtips.blogspot.com/2009/10/linechart-with-checkbox-legend.html,这篇文章给出了一种解决方案,就是通过遍历每个Series的单个数据项目算出所有项目的最大值和最小值,再比较Series对象数组元素,算出当前的最大值和最小值,最后赋值给轴的maximum和minimum的属性。这种不法不错,但有执行效率的问题。还有就是如果不只一个轴需要更新,这种方法比较麻烦。下面提供一种更好的办法。

分类
Flash

Flex Chart Legend的一个Bug

我想做一个自定义的图例(Legend),在每个图例项目(LegendItem)上放置一个删除按钮,点击删除按钮就能很方便地删除相应的数据系列(Series)。

我是通过设置legendMarkerRenderer为自定义图例项目标记来实现的:每个自定义标记都是一个按钮对象,原有的项目标记用一个矩形背景代替,然后在背景添加两条交叉直线。为了方便定位,我将矩形背景与交叉直线组中心对齐。有兴趣可以参看CloseBtnSkin.mxml。

分类
Flash

Flex Chart组件导致设计模式不能正常使用

今天,用Flash Builder 4基于Flex SDK 4新建了一个Chart应用,结果将Chart组件所在MXML文件切换到设计模式时出错:设计模式:布置组件时出错。请选择“设计”>“刷新”以刷新设计模式。

刷新了N次还是出现那个错误。逐个移除组件进行测试,最终是发现罪魁在于Chart组件,这是因为Chart组件自定义了GridLines,如下所示: