对ichartjs基于基于HTML5的开源图形组件画图的心得

简介：ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。如果你正在开发HTML5的应用，ichartjs正好适合您。chartjs是基于Apache License 2.0协议的开源项目。

心得：用ichartjs画图就是参照ichartjs官网（http://www.ichartjs.com/samples/index.html）的示例中心的示例以及ichartjs API（http://www.ichartjs.com/docs/zh/html/menu.html）（注：各个类的参数）就可以画出你想要的图形。

注意：现在项目中导入ichart.1.2.min.js库

示例：代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ichart.1.2.min.js"></script>
<script type="text/javascript">
$(function(){
var data = [
{
name : '安全库存达成率',
value:[1.33,1.27,1.34,1.17,1.3,1.1,1.35,1.3,1.26,0.99],
color:'#db9034',
line_width:2
},
{
name : '安全库存率',
value:[1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25],
color:'#e0b645',
line_width:2
}
];
var labels = ["2013年1月","2013年2月","2013年3月","2013年4月","2013 年 5 月","2013年6月","2013年7月","2013年8月","2013年9月","2013年10月"];
var chart = new iChart.LineBasic2D({
render : 'canvasDiv',
data: data,
align:'center',
title : {
text:'安全库存达成率',
fontsize:24,
color:'#f7f7f7'
},
width : 1000,
height : 400,
shadow:true,
shadow_color : '#20262f',
shadow_blur : 4,
shadow_offsetx : 0,
shadow_offsety : 2,
background_color:'#383e46',
tip:{
enable:true,
shadow:true
},
legend:{
enable:true,
background_color : null,
align:'center',
valign:'bottom',
row:1,
column:'max',
color:'#f7f7f7',
legend_space:40,
sign_size:20,
offsety:20,
border : {
enable : false
}
},
crosshair:{
enable:true,
line_color:'#62bce9'
},
crosshair:{
enable:true,
line_color:'#62bce9'
},
sub_option : {
label:false,
hollow_inside:false,
point_size:8
},
coordinate:{
width:'82%',
height:'80%',
gridVStyle:{color:'#383e46'},
grid_color:'#cccccc',
axis : {
width : 0
},
grids:{
horizontal:{
way:'share_alike',
value:8
},
vertical: {
way:'share_alike',
value:1
}
},
scale:[{
position:'left',
start_scale:0.7,
end_scale:1.5,
scale_space:0.1,
scale_size:2,
scale_enable:false,
label : {color:'#ffffff',fontsize:12},
scale_color:'#9f9f9f'
},{
position:'bottom',
label : {color:'#ffffff',fontsize:12},
labels:labels
}]
}
});
//开始画图
chart.draw();
});
</script>
</head>
<body>
<div id="canvasDiv"></div>
</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ichart.1.2.min.js"></script>
<script type="text/javascript">
$(function(){
var data = [
{
name : '招标采购额占比',
value:[83,86,85,78,91,81,59,82,84,65],
color:'#4f81bd'
},
{
name : '非招标采购额占比',
value:[17,14,15,22,9,19,41,18,16,35],
color:'#e0b645'
},
{
name :'常规招标采购比例',
value:[],
color :'#f7f7f7'
}
];
var chart = new iChart.ColumnStacked2D({
render : 'canvasDiv',
data: data,
labels:["2013年1月","2013年2月","2013年3月","2013年4月","2013年5月","2013年6月","2013年7月","2013年8月","2013年9月","2013年10月"],
title : {
text:'招标采购比例',
color:'#f7f7f7'
},
align:'center',
width : 1000,
height : 500,
background_color :'#383e46',
shadow : true,
shadow_blur : 3,
shadow_color : '#aaaaaa',
shadow_offsetx : 1,
shadow_offsety : 0,
label:{color:'#f7f7f7'},
legend:{
enable:true,
background_color : null,
align:'center',
valign:'bottom',
row:1,
column:'max',
color:'#f7f7f7',
legend_space:30,
offsetx:-90,
offsety:10,
sign_size:12,
border : {
enable : false
}
},
tip:{
enable :true,
listeners:{
//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
parseText:function(tip,name,value,text,i){
return name+":"+value;
}
}
},
percent:true,//标志为百分比堆积图
showpercent:true,
text_space : 1,//坐标系下方的label距离坐标系的距离。
zScale:8,
xAngle : 50,
sub_option:{
label :false
},
bottom_scale:1.1,
coordinate:{
width:'82%',
height:'80%',
board_deep:10,//背面厚度
pedestal:false,
left_board:false,//取消左侧面板
shadow:false,//底座的阴影效果
grid_color:'#6a6a80',//网格线
axis : {
width : 0
},
scale:[{
position:'left',
scale_enable : false,
start_scale:0,
scale_space:50,
label:{color:'#f7f7f7'}
}]
}
});
var data1 = [
{
name : '常规招标采购比例',
value:[80,80,80,80,80,80,80,80,80,80],
color:'#f7f7f7',
line_width:4
}
];
var line = new iChart.LineBasic2D({
z_index:1000,
data: data1,
tip:{
enable :true,
listeners:{
//tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
parseText:function(tip,name,value,text,i){
return name+":"+value;
}
}
},
sub_option : {
smooth:true,
label:false,
hollow_inside:false,
point_size:10
},
intersection:false,
coordinate:chart.coo
});
chart.plugin(line);
chart.draw();
});
</script>
</head>
<body>
<div id="canvasDiv"></div>
</body>
</html>


               效果：

对ichartjs基于基于HTML5的开源图形组件画图的心得相关推荐

基于HTML5 Canvas的开源图形组件-ichartjs 入门篇
ichartjs的官方网站为ichartjs(http://www.ichartjs.com/),目前最新版本为ichartjs v1.2 Released ,ichartjs的官方介绍: ichar ...
NodeBB – 基于 Node.js 的开源论坛系统
NodeBB 是一个更好的论坛平台,专门为现代网络打造.它是免费的,易于使用. NodeBB 论坛软件是基于 Node.js 开发,支持 Redis 或 MongoDB 的数据库.它利用 Web So ...
基于springboot+vue的开源自定义表单问卷系统
一.项目简介基于springboot+vue的开源自定义表单问卷系统二.实现功能支持表单拖拽支持各种控件操作(基础组件.进阶组件等) 基础组件包含文本.多行文本.图片.图形.日历控件支持拖拽 ...
【深度学习】基于Torch的Python开源机器学习库PyTorch卷积神经网络
[深度学习]基于Torch的Python开源机器学习库PyTorch卷积神经网络文章目录 1 CNN概述 2 PyTorch实现步骤2.1 加载数据2.2 CNN模型2.3 训练2.4 可视化训练 ...
【深度学习】基于Torch的Python开源机器学习库PyTorch回归
[深度学习]基于Torch的Python开源机器学习库PyTorch回归文章目录1 torch.autograd 2 torch.nn.functional 3 详细的回归DEMO3.1 DATAS ...
【深度学习】基于Torch的Python开源机器学习库PyTorch概述
[深度学习]基于Torch的Python开源机器学习库PyTorch概述文章目录 1 PyTorch简介 2 环境搭建 3 Hello world!3.1 Tensors (张量)3.2 操作 4 ...
python绘制3d图形-Python基于matplotlib实现绘制三维图形功能示例
本文实例讲述了Python基于matplotlib实现绘制三维图形功能.分享给大家供大家参考,具体如下: 代码一: # coding=utf-8 import numpy as np import m ...
python绘制三维曲线图_Python基于matplotlib实现绘制三维图形功能示例
本文实例讲述了Python基于matplotlib实现绘制三维图形功能.分享给大家供大家参考,具体如下: 代码一: # coding=utf-8 import numpy as np import m ...
python 量化交易框架开源_Hikyuu首页、文档和下载 - 基于 C++/Python 的开源量化交易研究框架 - OSCHINA - 中文开源技术交流社区...
Hikyuu Quant Framework是一款基于C++/Python的开源量化交易研究框架,用于策略分析及回测.其核心思想基于当前成熟的系统化交易方法,将整个系统化交易抽象为由市场环境判断策略. ...
基于DM642的X264开源代码实现的研究
基于DM642的X264开源代码实现的研究文章发表于:2008-09-08 11:24 作者:谭超王库傅颖来源:微计算机信息摘要:本文概述了H.264视频压缩编码标准的主要特性,简要介绍了当 ...

对ichartjs基于基于HTML5的开源图形组件画图的心得

对ichartjs基于基于HTML5的开源图形组件画图的心得相关推荐

最新文章

热门文章