首先，最好的教程在这里：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>

利用ichart绘制网页图表的更多相关文章

  1. 利用eChart绘制网页图表

    首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...

  2. C#中利用LightningChart绘制曲线图表

    最近在做一个“基于C#语言的电炉温控制软件设计”的设计,我在大学并不是专业学习C#语言编程的,对C#的学习研究完全是处于兴趣,所以编程技术也不是很厉害,遇到问题多参照网络上的开源码. 这不,在做这个课 ...

  3. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

  4. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  5. Python使用plotly绘制数据图表的方法

    转载:http://www.jb51.net/article/118936.htm 本篇文章主要介绍了Python使用plotly绘制数据图表的方法,实例分析了plotly绘制的技巧. 导语:使用 p ...

  6. 网页图表Highcharts实践教程之图表区

    网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...

  7. Highmaps网页图表教程之图表配置项结构与商业授权

    Highmaps网页图表教程之图表配置项结构与商业授权 Highmaps图表配置项结构 Highmaps最核心的部分就是图表配置项.用户通过图表配置项来对标题进行定制,从而实现自己所要的效果.所以,掌 ...

  8. Highmaps网页图表教程之Highmaps第一个实例与图表构成

    Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...

  9. 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)

    利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表  实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...

随机推荐

  1. ECMAScript5之Object学习笔记（二）

    继续第二部分 Object.freeze(obj) 看字面意思就是“把一个对象冻结”. 下面我们来看个简单的例子以作说明: // a person instance var person = { na ...

  2. SQL Server 附加数据库提示5120错误

    怎么样是不是跟你的错误是一样的,心里是不是有点小激动? T_T 终于有办法了!!!! 第一步先关掉你的SQLserver 然后在菜单上找找到SQLSERVER右键选择“以管理员运行” 第二步给你的数据 ...

  3. Linux动态库(.so)搜索路径

    主要内容: 1.Linux动态库.so搜索路径 编译目标代码时指定的动态库搜索路径: 环境变量LD_LIBRARY_PATH指定的动态库搜索路径: 配置文件/etc/ld.so.conf中指定的动态库 ...

  4. project开发的程序设计与逻辑设计

    非常多时候我们要做庞大project, 就像一棵大树, 方方面面都有自己的细枝末节,而作为开发员的我们,无法时时刻刻去保持对程序的全面认知,所以我们要把程序设计与逻辑设计区分开来. 那么什么是程序设计 ...

  5. iOS 怎样更新APP

    app更新的流程思想 得到当前版本currentVersion,将currentVersion与近期的版本latestVersion进行比較,若当前currentVersion较小.进行更新操作. 获 ...

  6. 虎嗅： 小米盒子vs乐视盒子

    机顶盒并非新鲜概念,可一旦和互联网发生了跨界关系,就会产生奇妙的反应.自年初小米盒子和乐视盒子分别在突破重重阻碍成功发售之后,互联网企业进军硬件制造领域的趋势愈发明显.今天我们拿到了两家的盒子产品,从 ...

  7. 算法笔记_178:历届试题 邮局(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 C村住着n户村民,由于交通闭塞,C村的村民只能通过信件与外界交流.为了方便村民们发信,C村打算在C村建设k个邮局,这样每户村民可以去离自己 ...

  8. 如何分析Java虚拟机死锁

    Thread Dump and Concurrency Locks Thread dumps are very useful for diagnosing synchronization relate ...

  9. MySQL优化小案例：连接数

    错误代码:MySQL: ERROR 1040: Too many connections 经常会遇到这个错误,要么是业务增长,正常的访问量增多,要么是自己的max_connections设置的过小了 ...

  10. Centos6.5生产环境最小化优化配置

    Centos6.5生产环境最小化优化配置,满足业务需求! 01.启动网卡 #centos6.x最小化安装后,网卡默认不是启动状态 ifup eth0  //  ifconfig eth0 up /et ...