分类
Javascript

使用webpack模板开发Three.js

Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。不过我发现绝大多数资料的示例都是用的CDN方式引入的。CDN的方式写代码无法触发IDE的代码提示,写起来好痛苦。于是我抽时间写了一个Three.js Webpack模板,现在你可以使用npm的方式在Three.js中使用ed6的语法。

分类
Flash

使用React和Echarts封装K线图组件

最近一朋友让我帮他弄一个股票图。了解我的人都知道很长一段时间我的工作就是画图表,Flex之后我用Flotr2开发过图表,但这个插件不支持K线图。我在网上找了找,发现Echart的K线图很好用也支持K线图。考虑到以后可能会复用,就结合React封装了一个K线组件。

分类
Javascript

AngularJS整合Echarts做饼图

还记Angularjs指令怎样传递函数参数吗?我们将表格封装成了一个指令。如果不封装就没有传递函数参数的问题了吗?我们要重申的是,封装是必要的,封装可以复用代码。试想,如果在再加入一个图表,要求也可以按时间段下钻。如果不封装的话,下钻这块实现要写两次。而且真实场景多数是表格图表都会的。所以说还是封装成组件好。

分类
Flash

使用不同颜色显示Flex AreaSeries的正负值

在最近项目中,要求对数据系列正负值使用不同颜色来显示。也许你要问为什么不用Flex ColumnSeries呢?然后通过filterFunction设置不同颜色多简单。问题是数据系列的数据点太多,使用ColumnSeries性能不佳。因此只好用AreaSeries,事实上,设定AreaSeries的filterFunction根本不起作用。但我们可以通过设定自定义的areaRenderer来实现。

分类
Flash

对齐多个Flex Chart的y轴

财经图表一般都由多个图表组成。与同步多个图表数据提示一样,多个图表还有对齐多个图表y轴的问题。正好有网友问到这个问题,特写此文小结一下。

最简单的办法就是动态设置gutterLeft或gutterRight样式。首先取得每个图表装订线大小,再比较获得水平装订线的最大值,当完成绘制后重新动态设置gutterLeft或gutterRight样式。如下面的代码: