一、JSCharts介绍

JScharts是一个用于在浏览器直接绘制图表的javascript工 具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，

JScharts图的数据可以来源于XML文件、JSON文件或 JavaScript数组变量。JScharts兼容所有主流的浏览器，且使用时无需任何服务器端的

插件或模块，是纯JavaScript组件，免费(含 水印)。

二、JsChart的特性

1. 支持3D饼状图或3D柱状图

2. 多系列柱状图

3. 水平柱状图

4. 线性图支持动画显示

5. 新的自定义方法

三、JSCharts的使用指南

1、下载Js库，从官网下载，使用的是jscharts.js文件

2、使用js库，引用<script type="text/javascript" src="js/jscharts.js">

3、定义容器，<div id="myjschart">this is context</div>

注意：此DIV容器内的内容都会被JScharts图像所替代

四、JSCharts的使用

1、曲线图

2、柱状图

3、饼状图

例子：

<!doctype html>
<html>  
 <head>
 <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  <title>JScharts Test</title>  
 </head>
 <script type="text/javascript" src="js/jscharts.js"></script>
 <body>   
<div id="chartcontainer">这只是一个替换内容</div><br/>
<div id="chartcontainer1">这只是一个替换内容</div><br/>
<div id="chartcontainer2">这只是一个替换内容</div><br/>
<div id="chartcontainer3">这只是一个替换内容</div><br/>
<div id="chartcontainer4">这只是一个替换内容</div><br/>
<script type="text/javascript">  
    //曲线图
    var myData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);  
    var myChart = new JSChart('chartcontainer', 'line');  
    myChart.setDataArray(myData);  
    myChart.draw();  
    
    //柱状图
    var myData1 = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5]);
    var myChart1 = new JSChart('chartcontainer1', 'bar');
    myChart1.setDataArray(myData1);
    myChart1.draw();
    
    //饼状图
    var myData2 = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5],['Unit 6',15],['Unit 7',5]);
    var myChart2 = new JSChart('chartcontainer2', 'pie');
    myChart2.setDataArray(myData2);
    myChart2.draw();
    
    //饼状图（xml导入数据）
    var myChart3 = new JSChart('chartcontainer3', 'pie');
    myChart3.setDataXML('js/jschart_data.xml');
    myChart3.draw();
    
    //饼状图（json导入数据）
    var myChart4 = new JSChart('chartcontainer4', 'pie');
    myChart4.setDataJSON('js/jschart_data.json');
    myChart4.draw();
</script>  
 </body>  
</html>

Xml和Json的内容

运行后的效果图：

　　　　　　　　曲线图（如上）

　　　　　　柱状图（如上）

　　　　　　饼形图（如上）

　　　　饼形图（如上，XML格式）

JsCharts图表的介绍和简单使用的更多相关文章

  1. 【转载】Ssh整合开发介绍和简单的登入案例实现

    Ssh整合开发介绍和简单的登入案例实现 Ssh整合开发介绍和简单的登入案例实现 一  介绍: Ssh是strtus2-2.3.1.2+ spring-2.5.6+hibernate-3.6.8整合的开 ...

  2. python模块介绍- HTMLParser 简单的HTML和XHTML解析器

    python模块介绍- HTMLParser 简单的HTML和XHTML解析器 2013-09-11 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq ...

  3. 基于.NET CORE微服务框架 -surging的介绍和简单示例 （开源）

    一.前言 至今为止编程开发已经11个年头,从 VB6.0,ASP时代到ASP.NET再到MVC, 从中见证了.NET技术发展,从无畏无知的懵懂少年,到现在的中年大叔,从中的酸甜苦辣也只有本人自知.随着 ...

  4. WebRTC介绍及简单应用

    WebRTC介绍及简单应用 WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. WebRTC实时 ...

  5. JQuery中jsCharts图表插件（十）

    一:1.jsCharts图表插件 注意:从官方下来的例子都没指定页面编码,在这种情况下,浏览器就会使用默认设置中文编码:GB2312,GBK等:导致无法执行. 请在html代码中的<head&g ...

  6. 1. pyhanlp介绍和简单应用

    1. pyhanlp介绍和简单应用 2. 观点提取和聚类代码详解 1. 前言 中文分词≠自然语言处理! 中文分词只是第一步:HanLP从中文分词开始,覆盖词性标注.命名实体识别.句法分析.文本分类等常 ...

  7. C#串口介绍以及简单串口通信程序设计实现

    C#串口介绍以及简单串口通信程序设计实现 周末,没事干,写个简单的串口通信工具,也算是本周末曾来过,废话不多,直接到主题 串口介绍 串行接口简称串口,也称串行通信接口或串行通讯接口(通常指COM接口) ...

  8. 消息队列介绍、RabbitMQ&Redis的重点介绍与简单应用

    消息队列介绍.RabbitMQ&Redis的重点介绍与简单应用 消息队列介绍.RabbitMQ.Redis 一.什么是消息队列 这个概念我们百度Google能查到一大堆文章,所以我就通俗的讲下 ...

  9. 进击的Python【第十二章】：mysql介绍与简单操作，sqlachemy介绍与简单应用

    进击的Python[第十二章]:mysql介绍与简单操作,sqlachemy介绍与简单应用 一.数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数 ...

随机推荐

  1. PHP之购物车的代码

    该文章记录了购物车的实现代码,仅供参考 book_sc_fns.php <?php include_once('output_fns.php'); include_once('book_fns. ...

  2. angularjs 依赖注入--自己学着实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...

  3. [原] KVM 虚拟化原理探究（2）— QEMU启动过程

    KVM 虚拟化原理探究- QEMU启动过程 标签(空格分隔): KVM [TOC] 虚拟机启动过程 第一步,获取到kvm句柄 kvmfd = open("/dev/kvm", O_ ...

  4. Docker与CI持续集成/CD

    背景        Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制 ...

  5. android计算每个目录剩余空间丶总空间以及SD卡剩余空间

    ublic class MemorySpaceCheck { /** * 计算剩余空间 * @param path * @return */ public static String getAvail ...

  6. 高仿it之家新闻客户端源码

    仿it之家新闻客户端界面,数据为本地假数据.仅实现了新闻模块的功能. 源码下载:http://code.662p.com/list/11_1.html 详细说明:http://android.662p ...

  7. sublime text 3 + python配置，完整搭建及常用插件安装

    四年的时间,一直使用EmEditor编辑器进行Python开发,之前是做面向过程,只需要将一个单独的py文件维护好即可,用着也挺顺手,但是最近在做面向对象的开发,不同的py文件中相互关联较多,感觉单纯 ...

  8. 基于token的多平台身份认证架构设计

    基于token的多平台身份认证架构设计 1   概述 在存在账号体系的信息系统中,对身份的鉴定是非常重要的事情. 随着移动互联网时代到来,客户端的类型越来越多, 逐渐出现了 一个服务器,N个客户端的格 ...

  9. ASP.NET MVC Model元数据(一)

    ASP.NET MVC Model元数据(一) 前言 在我初学的时候对Model元数据的概念很模糊,或者说是在大脑中没有它的一个模型,作为小白的我去看网上的一些文章还是两眼一黑啥都看不明白,然后我想退 ...

  10. egret调用页面js的方法。

    参考文献: http://bbs.egret-labs.org/thread-267-3-1.html http://docs.egret-labs.org/post/manual/threelibs ...