首先，最好的教程在这里：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. 从头说catalan数及笔试面试里那些相关的问题 （转）

    作者:寒小阳 时间:2013年9月. 出处:http://blog.csdn.net/han_xiaoyang/article/details/11938973. 声明:版权所有,转载请注明出处,谢谢 ...

  2. mybatis如何根据mapper接口生成其实现类(springboot)

    序 mybatis里头给sqlSession指定执行哪条sql的时候,有两种方式,一种是写mapper的xml的namespace+statementId,如下: public Student fin ...

  3. Android 色彩设计理念

    色彩 色彩从当代建筑.路标.人行横道以及运动场馆中获取灵感.由此引发出大胆的颜色表达激活了色彩,与单调乏味的周边环境形成鲜明的对照. 强调大胆的阴影和高光.引出意想不到且充满活力的颜色. 色样 – 0 ...

  4. C#.NET常见问题(FAQ)-使用SharpDevelop开发 如何切换设计视图和代码视图

    仅在MainForm.cs跟MainForm.Designer.cs文件页面上,底部有可以切换源代码跟设计的按钮(别的地方都木有)   点击就切换过来了     更多教学视频和资料下载,欢迎关注以下信 ...

  5. Windows Server 2012 R2 或 2016 无法安装 .Net 3.5.1

    Windows Server 2012 R2 或 2016 无法安装 .Net 3.5.1 问题描述 使用 Windows Server 2012 R2 或 Windows Server 2016系统 ...

  6. 单页WEB应用（三），Chat聊天模块

    Chat 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...

  7. .NET破解之迅捷PDF转换器(续)

    在以前的博文<.NET破解之迅捷PDF转换器>中使用了暴力破解的方法,现在软件版本从5.0升级到6.3,所以也尝试用新的方法. 方法一:暴力破解法 如往常一样,查找搜索到关键的函数,即Is ...

  8. TQ2440烧写方法总结

    USB烧写 接线:需要连接串口线.USB下载线和电源线. 软件:USB转串口驱动(因为现在的笔记本上一般都没有串口).USB下载驱动和DNW. 网络烧写 接线:需要连接串口线.网线和电源线. 软件:T ...

  9. 算法笔记_118:算法集训之结果填空题集二（Java）

     目录 1 欧拉与鸡蛋 2 巧排扑克牌 3 排座位 4 黄金队列 5 汉诺塔计数 6 猜生日 7 棋盘上的麦子 8 国庆星期日 9 找素数 10 填写算式 11 取字母组成串   1 欧拉与鸡蛋 大数 ...

  10. JAR，WAR，EAR区别

    JAR WAR EAR 英文 Java Archive file Web Archive file Enterprise Archive file 包含内容 class.properties文件,是文 ...