首先，最好的教程在这里：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. MySQL数据源在Spring中的配置

    干脆把MySQL的数据源配置也一起放这里,以备不时之需. MySQL的驱动包可以从这里 http://pan.baidu.com/s/1d02aZ 下载. 以下粗体部分是需要你根据实际情况调整的. & ...

  2. socket.io对IE8的支持

    默认下载了最新版的socket.io,版本号是1.7.2,对IE8的支持不好,反正在IE8下收发消息都不行.在网上查了很多资料,都解决不了IE8的问题,崩溃. 最后用了一个大家比较认可的版本1.0.6 ...

  3. ZH奶酪：在博客中添加Latex公式

    1. 点击编辑器中的插入图片: 2.在URL输入下边的地址: http://latex.codecogs.com/gif.latex?你的latex代码 就可以了-

  4. ZH奶酪：标准偏差

    标准偏差 标准偏差(Std Dev,Standard Deviation) -统计学名词.一种量度数据分布的分散程度之标准,用以衡量数据值偏离算术平均值的程度.标准偏差越小,这些值偏离平均值就越少,反 ...

  5. Java从零开始学三十六(JAVA IO- 字符流)

    一.字符流 BufferedReader:BufferedReader是从缓冲区之中读取内容,所有的输入的字节数据都将放在缓冲区之中 BufferedWriter:把一批数据写入到缓冲区,当缓冲区区的 ...

  6. Java从零开始学四(数据类型)

    一.Java数据类型划分 二.基本数据类型 No. 数据类型 大小/位 可表示的数据范围 1 long(长整数) 64 -9223372036854775808 ~ 92233720368547758 ...

  7. java面试第三天

    类和对象: 类:主观抽象,是对象的模板,可以实例化对象----具有相同属性和行为的对象的集合. 习惯上类的定义格式: package xxx; import xxx; public class Xxx ...

  8. 怎样以Root方式执行Xcode

    粗略算一下,在第一次接触OSX的时候,我接触Windows已经有14年,刚開始用OSX和Xcode各种不习惯.可是用Xcode写了一星期的代码,我却有一种想把Windows和VS扔了的感觉(真的用着非 ...

  9. oracle 多字段去重查询

      oracle 多字段去重查询 CreationTime--2018年6月29日15点11分 Author:Marydon 1.情景展示 需要对表BASE_MRI_DEVICE的COMPNAME.F ...

  10. 【Python】学习笔记六：循环

    循环是一个结构,导致一个程序要重复一定的次数 条件循环也一样,当条件变为假,循环结束 For循环 在python for循环遍历序列,如一个列表或一个字符. for循环语法:   ——for iter ...