wanghetommy
- 浏览: 29795 次
- 性别:
- 来自: 北京
-
最新评论
-
qzxfl008：
你好，折线图里能不能每段的颜色不一样的啊，大概思路是怎么样的啊 ...
ichartjs图表组件架构一览 -
djy252：
留下脚印~
ichartjs图表组件架构一览 -
h5gallery：
tjj006 写道大哥，CANVAS需要IE9吧？？那是必须滴 ...
利用ichartjs绘制天气图表 -
tjj006：
大哥，CANVAS需要IE9吧？？
利用ichartjs绘制天气图表 -
abian：
[/flash]
ichartjs开源图表在github上发布源代码
文章列表
ichartjs 是一款基于HTML5的图形库。致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。 经过3个月的优化与完善，我们很高兴的向您宣布，ichartjs开源技术小组在2013年06月26日正式发布1.2版本。新版本对上一个版本代码进行了进一步的优化，并且新增了堆积条形图。
特点
跨平台： ichartjs利用HTML5 canvas完成图形绘制工作，这样它有能力在现代的主流浏览器中运用自如。 无论是PC上的，还是在Android/iOS上，ichartjs都能在不改动任何代码的前提下提供统一的视图。
轻量级： 单一的 ...
导出图片是比较常见的需求。ichartjs导出图片的原理：
1.由chart.toDataURL()生成base64格式字符串(如果就在前台用，则可以直接使用base64格式的数据)
2.将base64格式字符串传输到后台。由后台语言生成图片。
3.在将图片下载下来
详情见附件代码。
经过测试发现一个Android下某些机型(三星note/s3/s4等)对HTML5 Canvas API实现有偏差一个小bug(也许不算)。
现象描述：
当globalCompositeOperation设置为'destination-over'前提下：
当设置了shadowColor时。会覆盖fillStyle的颜色值。
解决方法：
将shadowColor的值设置为'rgba(0,0,0,0.0)'可避免此问题。
为了满足各种字体尺寸的需求，ichartjs提供了fontunit配置项用于指定字体的单位。在任何一个可以配置文本的地方均可以用此进行配置。如：
为标题设置字体单位：
title:{
text:'The Rise of Pinterest',
color:'#4572a7',
fontunit:'em',//自定义em单位
fontsize : 2.5
}
为脚注设置字体单位：
footnote : {
text : 'source:comScore',
height:30,
fontunit:'em',//自定义em单位
fontsiz ...
有时候，我们可能需要根据后台的配置来生成图表，这样后台发过来的是一个配置对象，这时我们可以利用iChart.create(Object options)方法来创建图表。
options：配置参数，与正常创建图表一样的配置项。这里面多了一个配置项type，表示图表类型。如创建柱形图图表代码片段如下：
var chart = iChart.create({
type:'column2d',//type为必输项
render : 'canvasDiv',
data : data,
title : {
text : 'This is a sample spirit f ...
风向风力图是天气预报中常用的图表，通过本示例，我们可以制作出许多类似的监控图表，应用在各行各业中。
首先，看一下最终的效果图：
制作步骤：
1、选择折线图作为基础图形。
var chart = new iChart.LineBasic2D({
//...
});
2、加载一个箭头图片。
var image = new Image();
image.src = "arrow.png";
image.onload = function(){
create();//创建图表方法
}
3、在parsePoint事件中将方向值传入 ...
利用ichartjs绘制天气图表
- 博客分类：
- ichartjs
在ichartjs的折线图的基础上，通过事件接口，利用点参数，将天气图片绘制上去，这样就完成了天气图表的绘制工作了。不多说，附件是源码。
ichartjs 是一款基于HTML5的图形库。致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。 2013年03月13日，ichartjs开源技术小组正式发布1.1版本。新版本对上一个版本代码进行了全面的优化，并且新增了堆积柱形图与组合图。
特点
跨平台： ichartjs利用HTML5 canvas完成图形绘制工作，这样它有能力在现代的主流浏览器中运用自如。 无论是PC上的，还是在Android/iOS上，ichartjs都能在不改动任何代码的前提下提供统一的视图。
轻量级： 单一的 ichartjs压缩文件只有90k。如果 ...
鉴于国内google code访问不畅，ichartjs同时在github上发布有最新版本的源代码。地址为：
https://github.com/wanghetommy/ichartjs
图表类型
ichartjs目前实现的图表类型有：饼图、环形图、折线图、面积图、柱形图、簇状柱形图、条形图、簇状条形图。其中饼图与柱形图有3D视图。
前言
ichartjs采用了HTML5的canvas绘制图表，同时一些辅助组件(提示框，十字形)利用HTML的Div构建。这样兼顾了图表灵活性以及高性能。本文就ichartjs的组件架构做逐一的介绍
，以便大家能更好的了解和使用ichartjs。
架构图一览
组件说明
核心类
Element
：组件顶级父类，定义了初始化顺序，以及配置特性。Painter
：画图的抽象类，定义了绘图行为属性。Chart
：图表的抽象类，定义了图表的基本属性。搭建基本图表骨架，构造公告组件(标题、子标题、脚注、图例)Component
：图表组件的父类，定 ...
经过近10个月的不断探索，ichartjs开源技术小组终于发布了第一个正式1.0版本。虽然组件类型目前还不够全面 ，不过已初见端倪，包含了常用基本的图表组件。 对 Android与iOS的移动设备有良好的支持。
简介
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合你。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条 ...
ichartjs 是一款基于HTML5的图形库。致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。 经过6个月的优化，ichartjs开源技术小组正式发布1.0版本。
特点
跨平台： ichartjs利用HTML5 canvas完成图形绘制工作，这样它有能力在现代的主流浏览器中运用自如。 无论是PC上的，还是在Android/iOS上，ichartjs都能在不改动任何代码的前提下提供统一的视图。
轻量级： 单一的 ichartjs压缩文件只有90k。如果你只需要单一的图形功能，你也可以只加载你所需要的js文件。 那样代码量 ...
在ichartjs中，有一个$变量，它只是iChart的简写而已。如果你使用了其他的js库(如:
j
Query
)也用到了$，那么，只要后引入ichartjs
，ichartjs就不会使用$了。只要使用iChart即可。
例如，ichartjs中的如下代码：
$(function(){
//code...
})
可以修改为：
iChart(function(){
//code...
})
ichartjs里的这个函数的含义与
j
Query
的re ...
---Html5 将进行一次WEB 革命，很显然，你我都在这次革命中，我想你我都不会是旁观者，而是参与者。
前言
在html5 之前，网页上绚丽的动画大多是flash 的杰作，画图也可能是SVG 或者VML 。但是都不能真正的跨平台。html5 横空出世将改变这一现状。本文将介绍一款正在研发中的开源项目 ichartjs 的一个实例。也通过这个实例来展现一下Html5 canvas 的威力。
简介
ichartjs 目前还处于开发阶段，还有很多需要完善的地方。当然现在还有一些没有fixed 的bug 。今天偶然看到iteye 的这个活动，就先把目前的一个小demo 展示给 ...