手绘风格图表(附示例链接)

2013/10/10 15:40
阅读数 91
图表工具amCharts ( JavaScript Charts 、Javascript Stock Chart)v3.1和地图工具amMap( JavaScript Maps)v3.6,增加了不少强大的功能。其中的模式设置和手绘风格更是让不少用户眼前一亮。大家可以看看下面的截图,是不是比我们平常做的图表更漂亮呢?下面给大家介绍下。

amCharts & amMap手绘风格图表

模式

在新版本的图表和地图中可以改变整个图表的单个列/片模式。如果您想设置一个图表模式,使用AmGraph模式属性即可完成。如果你想设置单个列/片模式,可在图表数据中描述模式,为图表设置patternField。模式值应该是图片的URL、长、宽等对象,可能会有X、Y值或者任意X、Y值。

例如:graph.pattern = {"url":"../amcharts/patterns/black/pattern1.png", "width":4, "height":4};

完成上面的代码后,检查amcharts/模式文件夹,你可以使用它创建自己的模式。

手绘风格

设置chart.handDrawn = true,图表中的线可以弯曲,制作出手绘效果。你也可以修改chart.handDrawScatter (默认值为2)、chart.handDrawThickness(默认值为1)的值来进行分散视图。

如果你想要体验一下实际效果,你可以点击下面的链接:

体验链接:

观看示例 激发灵感

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部