一、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. zookeeper源码分析之三客户端发送请求流程

    znode 可以被监控,包括这个目录节点中存储的数据的修改,子节点目录的变化等,一旦变化可以通知设置监控的客户端,这个功能是zookeeper对于应用最重要的特性,通过这个特性可以实现的功能包括配置的 ...

  2. jQuery2.x源码解析(缓存篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计,jQuery ...

  3. Android—万能ListView适配器

    ListView是开发中最常用的控件了,但是总是会写重复的代码,浪费时间又没有意义. 最近参考一些资料,发现一个万能ListView适配器,代码量少,节省时间,总结一下分享给大家. 首先有一个自定义的 ...

  4. iOS开发 判断当前APP版本和升级

    从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...

  5. atitit.管理学三大定律：彼得原理、墨菲定律、帕金森定律

    atitit.管理学三大定律:彼得原理.墨菲定律.帕金森定律 彼得原理(The Peter Principle) 1 彼得原理解决方案1 帕金森定律 2 如何理解墨菲定律2 彼得原理(The Pete ...

  6. Oracle 用Drapper进行like模糊传参查询需要在参数值前后带%符合

    Oracle 用Drapper进行like模糊传参查询需要在参数值前后带%符合   string sqlstr="select * from tblname where name like ...

  7. Java：Double Brace Initialization

    在我刚刚接触现在这个产品的时候,我就在我们的代码中接触到了对Double Brace Initialization的使用.那段代码用来初始化一个集合: final Set<String> ...

  8. ASP.NET MVC 5 Web编程3 -- Controller的应用及扩展

    Controller基础 一. 访问修饰符 1.1 类的访问修饰符 Controller类的访问修饰符必须是public,url才能被拦截. internal能编译通过,但无法拦截url请求.priv ...

  9. 如果你发现mysql的外键约束不管用了

    不知为何我机子上的mysql竟然默认关闭外键约束,导致我试了好多遍都可以插入非法值,以下语句可以开启约束 SET foreign_key_checks = 1; (0则关闭) 备忘

  10. 从EF的使用中探讨业务模型能否脱离单一存储层完全抽象存在

    上次赶时间,就很流水账地写了上次项目对EF的一次实践应用模式,因为太长了,也没能探讨太多,所以再继续扩展. 这次想探讨的是,实体,如果作为类似于领域模型的业务模型存在,它的数据能否来自不同的数据源.这 ...