首先，最好的教程在这里：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. Escape字符总结

    有如下的 escape字符. 对于十进制来说,\后面只涵盖3个字符,比如\1234,是\123和字符4. 但是对于十六进制,后面会涵盖四个字符,比如\x1234,后面的四个字符都在\的涵盖范围内.  

  2. shell综合

    既可恶又不得不注意的地方: 1.if 与[ 之间必须有空格, 2.[ ]与判断条件之间也必须有空格, 3.]与; 之间不能有空格, 4.变量赋值的时候,等号两边不能有空格, 调试:sh -x xxx. ...

  3. java—（2）maven基本命令

    均在含pom.xml文件的路径下执行 maven命令执行是按阶段执行的.如执行mvn package.则实际上已经执行了例如以下命令: watermark/2/text/aHR0cDovL2Jsb2c ...

  4. STS 自动生成 getter 和 setter

    1.Source --  Generate Getters and Setters

  5. ios 的 desciption

    前段时间,终于将 ipa 文件打包完毕,上传appStore ,最后被打回,是因为 敏感的调用设备功能没有写描述. 有两种解决方式: A.直接修改 info.plist 文件 1.设置启动图标(CFB ...

  6. 无障碍阅读：页面缩放兼容性处理（zoom,Firefox火狐浏览器）

    1.无障碍阅读使用场景 无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug ...

  7. DOS批处理高级教程

    转载-->http://blog.csdn.net/lanbing510/article/details/7461073 前言 本教程主要引用伤脑筋版主的系列文章,同时参考引用[英雄]教程等其他 ...

  8. TestNG方法測试及注意要点 代码及配置具体解释(解决testng方法不运行问题)

    教你解决为什么TestNG中方法加了@Test注解,也在配置文件里配置了,可是方法就是不运行! 在使用TestNG进行測试时,使用配置文件的方式更easy于维护.可是常常遇到明明方法写了也配置运行了, ...

  9. from会存在潜在的陷阱

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #from会存在潜在的陷阱 #from时,可能会遇到相同变量名,变量会被悄悄覆盖掉, #但是import语句不 ...

  10. import 如何工作

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #import 如何工作 #程序第一次导入指定文件时,会执行三个步骤 #1)找到模块文件 #2)编译成位码(需 ...