分类
Javascript

使用Flotr自定义线性轴来显示时间

Flotr的轴默认为线性轴(mode=’normal’)。为什么要使用Flotr自定义线性轴来显示时间呢?正如上一篇文章所言:如果使用时间轴,当时间范围为五天时,会在当天与下一天之间绘制一大段多余的 连接线,而且轴标签有时会找不到对应的数据点而缺少实际意义。因此,有必要自定义线性轴而不是使用时间轴。

点击此处查看本实例的效果。是不是和http://www.riafan.com/advanced-linearaxis很相似呀?

是的,连算法都很相似。这里的所有日期标签是用axis.ticks数组来管理的,同样在一种日期格式下,当前标签与下一日期标签和上一标签的文本不相同时才显示出来。请参考下面代码:

分类
Javascript

使用Flotr绘制股票图

HTML5虽然还在起草阶段,但这不妨碍Html5 Canvas的流行。不管是简单游戏还是绘制图表,Html5 Canvas完全都可以胜任,各种主流浏览器都对Html5 Canvas支持得很好,低版本的IE也可以使用Excanvas来兼容。我们可以预见:Html5 Canvas将代替Flash绘制交互性很强的股票图。本文推荐使用Flotr,它是目前我见过的功能最全、性能最好、最适合绘制股票的HTML5 JavaScript图表库。不仅支持各种类型的图表(包括蜡烛图),还支持各种交互操作,如鼠标跟踪、选择缩放等。适当扩展,完全可以做出Google Finance那样的效果:http://www.humblesoftware.com/finance/index。本文的实例这么复杂,主要介绍一下绘制股票图基本流程和注意事项。

分类
Javascript

Flotr快速入门指南

Flotr是一个基于Prototype开发的javascript绘图工具。支持图例、鼠标跟踪、图片区域选择、图片缩放、添加事件钩子(event hook)、通过CSS设置样式等。本文是快速创建并运行Flotr的入门指南。首先确保你从Google Project得到Flotr的副本。

准备HTML

要使用Flotr,你得在header标签中包含如下脚本:

<!--[if IE]><script language="javascript" type="text/javascript" src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="path/to/prototype-x.x.x.x.js"></script>
<script language="javascript" type="text/javascript" src="path/to/flotr.js"></script>

第一个script标签包含了一个html条件语句, 这样可以确保只有在用户使用IE时才包含excanvas?javascript文件。Firefox、Safari和Opera 9 支持canvas标签来绘制2d图形。IE有一些类似于canvas标签的东西,叫VML。Excanvas为IE增加了canvas功能,但其它浏览器不需要它。

分类
Javascript

使用HTML5 Canvas绘制简单图表

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

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

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

Adobe最近将推出Edge项目

Adobe最近将推出Edge项目,Adobe Edge是使用HTML5和CSS3制作动画制作和交互的工具。拥有包括时间轴、图层和属性在内的面板。用户可以实时地查看设计的内容,并以与网络用户相同的方式与内容互动。


我们可以订阅发布通知:adobe.com/go/projectedge_notify。