- 浏览: 30630 次
- 性别:
- 来自: 北京
最新评论
-
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 展示给 ...