【详解】利用ichart绘制网页图表
2015-11-02 10:19
555 查看
首先，最好的教程在这里：ichartjs
有了这个网站，要绘制网页图表简直方便愉快！
接下来说一下使用方法~~~
进入网站，点击在线设计器
在线设计器的使用方法就不说了，摸索一下就会了！关键在于两个地方：
1. 源代码
这里面的代码直接复制出来，写到我们的jsp文件中就可以直接显示。很方便。
但需要注意的一点是：如果图表中有中文，我们还需要在jsp代码顶端加这么一句，
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>设置好编码。这样就可以正常显示汉字了
2.数据源
我们新建一些图表，这里这个数据源可以控制显示多少个数据并设置参数。
除了在线设计器中的三种，条形图、柱状图、饼图，我们可以在网站主页看到
这么多类型多样的漂亮图表，点进去可以view code。这部分code是js代码。可以方便的拿出来使用！
想要绘制这些图表时，将view code部分的代码，复制到在线设计器中的Script部分，非常方便！
我们只需要注意div的名称在js和xml部分一致就OK啦！
贴一个示例：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<meta charset='UTF-8'>
<title>ichartjs designer</title>
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
<script type='text/javascript'>
$(function(){
var data = [
{name : 'Android',value : 52.5,color:'#4572a7'},
{name : 'IOS',value : 34.3,color:'#aa4643'},
{name : 'RIM',value : 8.4,color:'#89a54e'},
{name : 'Microsoft',value : 3.6,color:'#80699b'},
{name : 'Other',value : 1.2,color:'#3d96ae'}
];
var chart = new iChart.Pie3D({
render : 'ichart-render',
data: data,
title : {
text : 'Mobile-Friendly Distribution',
height:40,
fontsize : 30,
color : '#282828'
},
footnote : {
text : 'ichartjs.com',
color : '#486c8f',
fontsize : 12,
padding : '0 38'
},
sub_option : {
mini_label_threshold_angle : 40,//迷你label的阀值,单位:角度
mini_label:{//迷你label配置项
fontsize:20,
fontweight:600,
color : '#ffffff'
},
label : {
background_color:null,
sign:false,//设置禁用label的小图标
padding:'0 4',
border:{
enable:false,
color:'#666666'
},
fontsize:11,
fontweight:600,
color : '#4572a7'
},
border : {
width : 2,
color : '#ffffff'
},
listeners:{
parseText:function(d, t){
return d.get('value')+"%";//自定义label文本
}
}
},
legend:{
enable:true,
padding:0,
offsetx:120,
offsety:50,
color:'#3e576f',
fontsize:20,//文本大小
sign_size:20,//小图标大小
line_height:28,//设置行高
sign_space:10,//小图标与文本间距
border:false,
align:'left',
background_color : null//透明背景
},
shadow : true,
shadow_blur : 6,
shadow_color : '#aaaaaa',
shadow_offsetx : 0,
shadow_offsety : 0,
background_color:'#f1f1f1',
align:'right',//右对齐
offsetx:-100,//设置向x轴负方向偏移位置60px
offset_angle:-90,//逆时针偏移120度
width : 800,
height : 400,
radius:150
});
//利用自定义组件构造右侧说明文本
chart.plugin(new iChart.Custom({
drawFn:function(){
//在右侧的位置，渲染说明文字
chart.target.textAlign('start')
.textBaseline('top')
.textFont('600 20px Verdana')
.fillText('Market Fragmentation:\nTop Mobile\nOperating Systems',120,80,false,'#be5985',false,24)
.textFont('600 12px Verdana')
.fillText('Source:ComScore,2012',120,160,false,'#999999');
}
}));
chart.draw();
});
</script>
</head>
<body style='background-color:#244c74;'>
<div id='ichart-render'></div>
</body>
</html>
有了这个网站，要绘制网页图表简直方便愉快！
接下来说一下使用方法~~~
进入网站，点击在线设计器
在线设计器的使用方法就不说了，摸索一下就会了！关键在于两个地方：
1. 源代码
这里面的代码直接复制出来，写到我们的jsp文件中就可以直接显示。很方便。
但需要注意的一点是：如果图表中有中文，我们还需要在jsp代码顶端加这么一句，
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>设置好编码。这样就可以正常显示汉字了
2.数据源
我们新建一些图表，这里这个数据源可以控制显示多少个数据并设置参数。
除了在线设计器中的三种，条形图、柱状图、饼图，我们可以在网站主页看到
这么多类型多样的漂亮图表，点进去可以view code。这部分code是js代码。可以方便的拿出来使用！
想要绘制这些图表时，将view code部分的代码，复制到在线设计器中的Script部分，非常方便！
我们只需要注意div的名称在js和xml部分一致就OK啦！
贴一个示例：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<meta charset='UTF-8'>
<title>ichartjs designer</title>
<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
<script type='text/javascript'>
$(function(){
var data = [
{name : 'Android',value : 52.5,color:'#4572a7'},
{name : 'IOS',value : 34.3,color:'#aa4643'},
{name : 'RIM',value : 8.4,color:'#89a54e'},
{name : 'Microsoft',value : 3.6,color:'#80699b'},
{name : 'Other',value : 1.2,color:'#3d96ae'}
];
var chart = new iChart.Pie3D({
render : 'ichart-render',
data: data,
title : {
text : 'Mobile-Friendly Distribution',
height:40,
fontsize : 30,
color : '#282828'
},
footnote : {
text : 'ichartjs.com',
color : '#486c8f',
fontsize : 12,
padding : '0 38'
},
sub_option : {
mini_label_threshold_angle : 40,//迷你label的阀值,单位:角度
mini_label:{//迷你label配置项
fontsize:20,
fontweight:600,
color : '#ffffff'
},
label : {
background_color:null,
sign:false,//设置禁用label的小图标
padding:'0 4',
border:{
enable:false,
color:'#666666'
},
fontsize:11,
fontweight:600,
color : '#4572a7'
},
border : {
width : 2,
color : '#ffffff'
},
listeners:{
parseText:function(d, t){
return d.get('value')+"%";//自定义label文本
}
}
},
legend:{
enable:true,
padding:0,
offsetx:120,
offsety:50,
color:'#3e576f',
fontsize:20,//文本大小
sign_size:20,//小图标大小
line_height:28,//设置行高
sign_space:10,//小图标与文本间距
border:false,
align:'left',
background_color : null//透明背景
},
shadow : true,
shadow_blur : 6,
shadow_color : '#aaaaaa',
shadow_offsetx : 0,
shadow_offsety : 0,
background_color:'#f1f1f1',
align:'right',//右对齐
offsetx:-100,//设置向x轴负方向偏移位置60px
offset_angle:-90,//逆时针偏移120度
width : 800,
height : 400,
radius:150
});
//利用自定义组件构造右侧说明文本
chart.plugin(new iChart.Custom({
drawFn:function(){
//在右侧的位置，渲染说明文字
chart.target.textAlign('start')
.textBaseline('top')
.textFont('600 20px Verdana')
.fillText('Market Fragmentation:\nTop Mobile\nOperating Systems',120,80,false,'#be5985',false,24)
.textFont('600 12px Verdana')
.fillText('Source:ComScore,2012',120,160,false,'#999999');
}
}));
chart.draw();
});
</script>
</head>
<body style='background-color:#244c74;'>
<div id='ichart-render'></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- c的按位取反运算符（~) 与逻辑（！）
- 在eclipse中执行数据库脚本
- 内存管理
- LeetCode 012 Integer to Roman
- （转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html）WebWork深入浅出
- jQuery EasyUI 窗口 – 创建简单窗口
- 一级建造师和二级建造师考试内容上的区别
- Dialog
- Intent传递对象的两种方法
- android开发之shape详解
- Apache Hawq Data Locality简介 (1) [作者：张桓]
- 大连理工大学文科实验教学中心网站和新闻学研究与方法网站
- 使用UGUI做下拉列表的方案
- ld命令和u-boot中的lds文件实例和简单实例分析
- js正则表达式
- jquery实现网页的页面平滑滚动效果代码
- SharedPreferences浅谈+实例
- python实现机器学习之随机森林
- 此实现不是 Windows 平台 FIPS 验证的加密算法的一部
- 案例｜服务化架构系统监控难题解决方案