一、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. SDWebImage源码解读_之SDWebImageDecoder

    第四篇 前言 首先,我们要弄明白一个问题? 为什么要对UIImage进行解码呢?难道不能直接使用吗? 其实不解码也是可以使用的,假如说我们通过imageNamed:来加载image,系统默认会在主线程 ...

  2. 用神奇的currentColor制作简洁的颜色动画效果

    先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话:  2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了. 在CSS3中扩展了 ...

  3. C# 生成验证码图片时消除锯齿

    引言 基于生成图片实现了一个手机号转图片的需求. 内容也很简单,直接用手机号生成一个png图片.就是为了背景透明以便其他地方调用. 有无锯齿主要依靠一句代码:g.TextRenderingHint= ...

  4. PHP好用但又容易忽略的小知识

    1.PHP函数之判断函数是否存在 当我们创建了自定义函数,并且了解了可变函数的用法,为了确保程序调用的函数是存在的,经常会先使用function_exists判断一下函数是否存在.同样的method_ ...

  5. ASP.NET MVC一次删除多笔记录

    批量删除数据记录,如下面的截屏: 先选中想删除的记录,然后点一下删除铵钮,系统将把选中的记录一次性删除.在此,Insus.NET不想每删除一笔记录连接一次数据库. 因此需要把选择的记录一次上传至服务器 ...

  6. Android之使用文件进行IPC

    一.文件进行IPC介绍 共享文件也是一种不错的进程间通信方式,两个进程通过读/写同一个文件来交换数据.在Windows上,一个文件如果被加了排斥锁将会导致其他线程无法对其进行访问,包括读写,而由于An ...

  7. 《月之猎人 (Moon Hunters)》主角设计

    原文链接 游戏开发人员,你们好! 我是 Kitfox Games 工作室的总监 Tanya,我们的工作室位于加拿大的蒙特利尔,拥有六名员工. 我们 3 月份发布了<月之猎人>游戏的桌面版, ...

  8. 【Win10】UAP/UWP/通用 开发之 x:Bind

    [Some information relates to pre-released product which may be substantially modified before it's co ...

  9. 【道德经】漫谈实体、对象、DTO及AutoMapper的使用

    写在前面 实体和值对象 实体和对象 故常无欲以观其妙,常有欲以观其徼 初始实体和演化实体 代码中的DTO AutoMapper实体转换 后记 实体(Entity).对象(Object).DTO(Dat ...

  10. 【腾讯Bugly干货分享】微信终端跨平台组件 Mars 系列 - 我们如约而至

    导语 昨天上午,微信在广州举办了微信公开课Pro.于是,精神哥这两天的朋友圈被小龙的"八不做"刷屏了.小伙伴们可能不知道,下午,微信公开课专门开设了技术分论坛.在分论坛中,微信开源 ...