介绍一个!非常简单非常方便!制作图表报表的js库 —— ichartjs 【详细操作】

ichartjs是一个国产的图表库,提供各种api,以及多种样式的图表

图表包括:面积图、2d条形图、2d柱状图、3d柱状图、折线图、饼状图等,并且可以组合图形。

ichart是一个轻量级的js组件,快速构建图表并可跨平台使用

这是ichart的案例展示图,在这个页面我们通过点击view code 查看当前图表调用api的方法

ichart官网api的说明使用的参考文档

一个简单的例子熟悉一下ichart.js

1.通过官网我们去下载一个最新版本的ichart(文章最后有链接)

2.在解压的根目录我们可以看到一个ichart.1.2.min.js,这个就是ichart的全部代码(带了.min是一个压缩的版本)

3.创建一个文件夹,把ichart.1.2.min.js归放到js文件夹里面

4.新建一个html文档,在<head>之间引入jQuery 和 ichart.1.2.min.js(没有jQuery的请自己在网上找一个,当然你下载的ichart压缩包里面包含了,请自己找)

5.在页面创建一个div并指定一个id=‘canvasDiv‘

6.输入如下代码(用<script>包含),一个完美的2d条形图就搞定了!!!

 1 function Bar2D(){
 2 var data = [
 3             {name : ‘Kamile Jureviciute‘ ,value :80 ,color:‘#006CFF‘},{name : ‘Donald Sue‘ ,value :33 ,color:‘#FF6600‘},{name : ‘Connie Vuong‘ ,value :173 ,color:‘#34A038‘},{name : ‘Karen Zanger‘ ,value :75 ,color:‘#945D59‘},                                  ];
 4
 5 new iChart.Bar2D({
 6     render : ‘canvasDiv‘, //指定绘制到的id
 7     data: data, //图表的数据
 8     title : "Number of Patient Visit",  //图表的标题
 9     animation:true, //是否显示动画,默认为false
10     decimalsnum:2,  //百分点精确到2位
11     width : 900, //宽度
12     height : 400, //高度
13     align : ‘left‘, //对齐方式,默认为center
14     padding : 15, //填充
15     border: ‘none‘, //边框,默认为true    //鼠标交互的tip提示
16     tip:{
17           enable:true,
18           listeners:{
19                //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
20               parseText:function(tip,name,value,text,i){
21                   return "详细信息: <br />"+value+"k";
22               }
23           }
24     },
25
26
27   }).draw();
28 }
29
30 Bar2D();

7.说明

你可以在解压后的文件夹src里面找到对应单一的图表js,这样只需要加载所用到的图表的js组件(minify文件夹为压缩版)

你可以通过参考文档 查阅更多的api

下载地址 ichart官网

(注:转载请注明来源)

时间: 2024-11-09 05:58:14

介绍一个!非常简单非常方便!制作图表报表的js库 —— ichartjs 【详细操作】的相关文章

html5轻量级操纵和制作SVG动画的js库-svg.js

svg.js是一个轻量级的操纵和制作SVG动画的js插件库.svg.js可以生成SVG图形.图像.文字和路径等等.svg.js还可以用于制作svg动画和互动拖拽等效果. svg.js不依赖与jQuery等外部插件库,它遵循麻省理工学院的许可( MIT License)下许可证的条款. 在线演示:http://www.htmleaf.com/Demo/201501301302.html 下载地址:http://www.htmleaf.com/html5/SVG/201501301301.html

介绍一个简单的Parser

我们已经学习了怎样创建一个简单的Monad, MaybeMonad, 并且知道了它如何通过在 Bind函数里封装处理空值的逻辑来移除样板式代码. 正如之前所说的,我们可以在Bind函数中封装更复杂的逻辑. 下面给出一个更复杂更典型的Monad例子,一个解析器Monad. 在本篇将要介绍一个解析器,在之后的篇幅里将会把解析器转换成一个 Monad. 首先我们思考解析器要完成什么功能,它接受一个输入,通常是一些文本,然后输出期望的结果. 因此一个CSV解析器将会接受一个文本文件,输出行和列的数据,并

一个简单的ORM制作(SQL帮助类)

一个简单的ORM制作大概需要以下几个类: SQL执行类 CURD操作类 其他酱油类 先从SQL执行类说起,可能会涉及数据库的迁移等问题,所以需要定义一个接口以方便迁移到其他数据库, 事务没提供命名,若需要命名可修改为可变参数,IHelper代码如下: internal interface IHelper:IDisposable { int ExecuteQuery(string txt, IEnumerable<IDataParameter> ps, bool issp);//用于执行INSE

Highcharts是一个制作图表的纯Javascript类库

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTool

Hello,Cardboard!!-如何开发一个最简单的Cardboard虚拟现实应用(一)

温馨提醒,本篇为介绍篇,如果只想看如何开发的具体步骤请参看<Hello,Cardboard!!-如何开发一个最简单的Cardboard虚拟现实应用(三)> 前述:恕我啰嗦一下,主要照顾对cardboard不太了解的朋在,Cardboard是由Google公司的两位巴黎办公室的员工利用业余时间创作出来的作品,它最大的特点就是将原来人们以为高大上的虚拟现实技术以廉价的方式带进了公众的视野,到目前为止,google已推出了改良版的cardboard 2代盒子,相比1代,2代改善了成像,增加了视野范围

(转载)介绍一个成功的 Git 分支模型

介绍一个成功的 Git 分支模型 在这篇文章中,我提出一个开发模型.我已经将这个开发模型引入到我所有的项目里(无论在工作还是私人)已经一年有余,并且它被证明是非常成功的.我打算写这些已经很久了,但我一直找不到时间来做,现在终于有时间了.我不会讲任何项目的具体细节,仅是关于分支策略和释放管理相关内容. 它主要体现了Git对我们源代码版本的管理. 为何是Git? 对于Git与其他集中式代码管理工具相比的优缺点的全面讨论,请参见这里.这样的争论总是喋喋不休.作为一个开发者,与现今的其他开发工具相比较,

用Qt写软件系列五:一个安全防护软件的制作(1)

引言 又有许久没有更新了.Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了.本来计划要写一系列关于Qt组件美化的博文,但是写了几篇之后就没坚持下去了.技术上倒是问题不大,主要是时间不够充裕.这段时间写几篇关于界面整体设计的博文,从最基础的界面元素开始,到最后构建一个页面元素丰富的桌面应用程序.Trojan Assessment Platform是一个原型设计项目,只是实现了有限的一部分功能.远远还称不上是一个评估平台.这里仅仅侧重于用Qt做界面的实现. 界面预览 首先还是看看

IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题,以及开发人员对HTML5新技术需要一段时间了解和熟练,所以学习HTML必须兼顾这两个版本.可以按版本升级的方式,先学习HTML4的技术,再延伸学习HTML5新增加的内容.而HTML是一个不断变化的标准,不管是哪个版本都属于HTML技术,所以本书直接学习HTML5的标准,当然遇到与HTML4变化较大的

[.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office

打造一个很简单的文档转换器 - 使用组件 Spire.Office 目录 Spire.Office 介绍 库引用 界面预览 代码片段 Spire.Office 介绍 关于 Spire.Office,它是一个专门为开发人员创建,读取,写入设计的库,转换和从打印 word 文档文件.作为一个独立的 .NET组件,它不需要在机器上安装微软的 Word 等办公软件.然而,它可以将微软的“文档创建功能”集成到任何开发人员的网络应用程序中.它是一个可靠的 MS Word 的API,可以执行许多Word文档处