首先，最好的教程在这里：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. ListView 设置列对齐方式

    <ListView.Resources> <Style TargetType="ListViewItem"> <Setter Property=&qu ...

  2. typescript 的一种引入文件的方式 Triple-Slash Directives

    ---恢复内容开始--- /// reference 原文: https://www.typescriptlang.org/docs/handbook/triple-slash-directives. ...

  3. WebRequest多线程 超时问题

    using System; using System.Collections; using System.Collections.Generic; using System.Net; using Sy ...

  4. poj_1681_高斯消元

    这道题和之前的把那一道1222很类似.仅仅只是一定要注意一下对于无解的推断. /*########################################################### ...

  5. 计算两端yuv视频流中每一帧的ssim值

    方法同上一篇,仅仅不多这里在计算的时候用了opencv1的接口,出现了一些问题.最后总算攻克了. 程序: #include <stdlib.h> #include <stdio.h& ...

  6. 多个桌面Deskspace如何使用

    1 给Deskspace设置背景.在DeskSpace选项中设置显示背景为天空箱体图像(软件自带的图像效果,也可以使用静态图像,即自己的图片) 2 给六个桌面各设置一个背景(也可以使用同一个背景)右击 ...

  7. SqlServer数据库分离与附加

    SQL Server提供了“分离/附加”数据库.“备份/还原”数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用的“分离/附加”方法,类似于大家熟悉的“文件拷贝”方法,即把数据库文 ...

  8. Javascript获取当月的天数

    var d = new Date(); var curMonthDays = new Date(d.getFullYear(), (d.getMonth() + 1), 0).getDate(); a ...

  9. Android网络开发之HttpClient

    Apache提供HttpClient,它对java.net中的类做了封装和抽象,更适合在Android上开发应用. HttpClient应用开发几个类: 1. ClientConnectionMana ...

  10. 【laravel5.4】{{$name}}、{{name}}、@{{$name}} 和 @{{name}} 的区别

    1.前面带@符号的,表示不需要laravel的blade引擎进行解析:有@的,则需要blade解析 2.{{$name}} 表示:blade解析 后台php的 name变量 {{name}} 表示:b ...