【ichart】简单的统计图表ichart.js的使用

1、首先下载,点击下载

 

2、只需要这一个js,粘贴赋值到自己项目中即可。

 

 

3、引入js

<script  type="text/javascript" src="../js/ichart.1.2.min.js"></script>
<script  type="text/javascript" src="../js/jquery.min.js"></script>
注:	(1)路径根据实际情况自行调整。
	(2)jquery没有的自行百度。

4、需要展示图表的地方加入

<div id="canvasDiv"></div>

5、加入最后的js代码

注:这段js复制即可  点击选择你需要的类型

$(function(){var data = [{name : 'IE',value : 35.75,color:'#a5c2d5'},{name : 'Chrome',value : 29.84,color:'#cbab4f'},{name : 'Firefox',value : 24.88,color:'#76a871'},{name : 'Safari',value : 6.77,color:'#9f7961'},{name : 'Opera',value : 2.02,color:'#a56f8f'},{name : 'Other',value : 0.73,color:'#6f83a5'}];new iChart.Column2D({render : 'canvasDiv',data: data,title : 'Top 5 Browsers from 1 to 29 Feb 2012',showpercent:true,decimalsnum:2,width : 800,height : 400,coordinate:{background_color:'#fefefe',scale:[{position:'left',    start_scale:0,end_scale:40,scale_space:8,listeners:{parseText:function(t,x,y){return {text:t "%"}}}}]}}).draw();});
一个简单的图表就完成啦!



6、代码说明

//定义数据var data = [{name : 'H',value : 7,color:'#a5c2d5'},{name : 'E',value : 5,color:'#cbab4f'},{name : 'L',value : 12,color:'#76a871'},{name : 'L',value : 12,color:'#76a871'},{name : 'O',value : 15,color:'#a56f8f'},{name : 'W',value : 13,color:'#c12c44'},{name : 'O',value : 15,color:'#a56f8f'},{name : 'R',value : 18,color:'#9f7961'},{name : 'L',value : 12,color:'#76a871'},{name : 'D',value : 4,color:'#6f83a5'}];$(function(){    var chart = new iChart.Column2D({render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的IDdata: data,//绑定数据title : 'Hello World\'s Height In Alphabet',//设置标题width : 800,//设置宽度,默认单位为pxheight : 400,//设置高度,默认单位为pxshadow:true,//激活阴影shadow_color:'#c7c7c7',//设置阴影颜色coordinate:{//配置自定义坐标轴scale:[{//配置自定义值轴position:'left',//配置左值轴    start_scale:0,//设置开始刻度为0end_scale:26,//设置结束刻度为26scale_space:2,//设置刻度间距listeners:{//配置事件parseText:function(t,x,y){//设置解析值轴文本return {text:t " cm"}}}}]}});//调用绘图方法开始绘图
        chart.draw();});//Html代码<div id='canvasDiv'></div>

 






7.相关资源

在线简易图表设计器

ichartjs开源图表组件示例中心

Ichartjs文档说明


参考:http://blog.csdn.net/sinat_29325027
https://www.cnblogs.com/ziyoublog/p/9040045.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ActiveMQ——activemq的使用java代码实例(精选)

ActiveMQ 在java中的使用&#xff0c;通过单例模式、工厂实现 Jms规范里的两种message传输方式Topic和Queue&#xff0c;两者的对比如下表()&#xff1a; TopicQueue概要Publish Subscribe messaging 发布订阅消息Point-to-Point 点对点有无状态topic数据默认不落地&#xff…

Eclipse+GitHub 提交代码错误 -“rejected - non-fast-forward”

Eclipse Push出现rejected - non-fast-forward错误 在 Push到服务器时有时会出现 rejected - non-fast-forward 错误&#xff0c;这是由于远端发生改变&#xff0c;此时再提交之前你需要将远端的改变合并到本地上错误原因&#xff1a;文件冲突&#xff0c;本地的代码和远程Repo…

两天学会css基础(一)

什么是css&#xff1f;css的作用是什么&#xff1f; CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式&#xff0c;搭建页面结构&#xff0c;比如设置元素的宽高大小&#xff0c;颜色&#xff0c;位置等等。 学习css之前先了解一下css代码在HTML中的…

LVM 逻辑卷 (logica volume manager)

逻辑卷轴管理员 (Logical Volume Manager) 想像一个情况&#xff0c;你在当初规划主机的时候将 /home 只给他 50G &#xff0c;等到使用者众多之后导致这个 filesystem 不够大&#xff0c; 此时你能怎么作&#xff1f; 多数的朋友都是这样&#xff1a;再加一颗新硬盘&#xff0…

sql查询语句for xml path语法

【原地址】 for xml path作用&#xff1a;将多行的查询结果&#xff0c;根据某一些条件合并到一行。 例&#xff1a;现有一张表 执行下面语句 select Department,(SELECT Employee, FROM People b WHERE b.Departmenta.Department For XML Path()) Student from People as a g…

Android Studio打包以及Gradle配置构建

本文转载 郭霖公众号 https://mp.weixin.qq.com/s?__bizMzA5MzI3NjE2MA&mid2650241610&idx1&snb8af73f6c288b6617d9fe0ab3618118d&pass_ticketQK4j37kpmGNlsYcECWMb64HxKHEVJG5mSJubQEQguKI%3D 生成签名文件手动打包 首先生成签名文件&#xff0c;点击 Build…

java重载方法math_Java语言程序设计(十二)Math数学类,方法重载及变量作用域...

1.重载方法上一篇文章用到的max方法只能用于int型数据类型&#xff0c;但是如果需要决定两个浮点数中哪个较大&#xff0c;解决方法是创建另一个方法名相同但参数不同的方法&#xff0c;代码如下&#xff1a;public static double max(double num1, double num2){if(num1>nu…

编码(转)

https://www.zhihu.com/question/28164512 关于编码和乱码的问题&#xff0c;我简单讲一下。 通常问这类问题的人是混淆了若干个不同的概念&#xff0c;并且他们自己也没有意识到自己混淆了这些概念的。 终端显示字符的编码&#xff08;windows下终端是cmd&#xff0c;linux下是…

Spring MVC:测试简介

测试是软件开发中最重要的部分之一。 井井有条的测试有助于使应用程序代码保持良好状态&#xff0c;并且处于工作状态。 有很多不同类型的测试和方法。 在本文中&#xff0c;我想对基于Spring MVC的应用程序进行单元测试进行介绍。 不要希望在这里阅读有关Spring MVC测试的全部…

试验ConcurrentHashmap

我正在研究我最近的一个项目中的内存问题&#xff0c;该项目将数据保留在内存中以进行快速访问&#xff0c;但是应用程序的内存占用量非常大。 该应用程序大量使用CHM&#xff08;即Concurrenthashmap&#xff09; &#xff0c;因此&#xff0c;无需再费脑筋地猜测CHM是问题所…

java线程池任务失败_ThreadPoolExecutor线程池任务执行失败的时候会怎样

1. 任务执行失败时的处理逻辑1.1. WorkerWorker相当于线程池中的线程可以看到&#xff0c;Worker有几个重要的属性&#xff1a;thread &#xff1a; 这是Worker运行的线程&#xff0c;可以理解为一个Worker就是一个线程firstTask &#xff1a; 初始任务&#xff0c;可能为为n…

转:HttpModule与HttpHandler详解

ASP.NET对请求处理的过程&#xff1a;当请求一个*.aspx文件的时候&#xff0c;这个请求会被inetinfo.exe进程截获&#xff0c;它判断文件的后缀&#xff08;aspx&#xff09;之后&#xff0c;将这个请求转交给 ASPNET_ISAPI.dll&#xff0c;ASPNET_ISAPI.dll会通过http管道&…

mysql时间函数总结_MySQL 日期时间函数常用总结

获得当前日期时间(date time)1.1 函数&#xff1a;now()相关函数&#xff1a;current_timestamp()&#xff0c;localtime()&#xff0c;localtimestamp()举例说明&#xff1a;2. 获得当前日期(date)函数&#xff1a;curdate()相关函数&#xff1a;current_date()&#xff0…

Apache CXF – JAX-WS –简单教程

许多Java开发人员认为Web Service实现的任务艰巨-没人能真正责怪他们&#xff0c;尤其是在企业应用程序开发的多年中&#xff0c;这给开发和设计带来了很多复杂性。 对于某些人来说&#xff0c;了解它是构建完整的企业应用程序的下一步-Web服务-是实现面向服务设计的关键方案之…

Java StringBuilder神话被揭穿

神话 用加号运算符连接两个字符串是万恶之源 -匿名Java开发人员 注意 &#xff1a;此处讨论的测试的源代码可以在Github上找到 从大学时代起&#xff0c;我就学会了使用运算符将Java中的String连接视为致命的性能缺陷。 最近&#xff0c;在Backbase R&#xff06;D上进行了一…

java3d创建立方体_Opengl创建几何实体——四棱锥和立方体

//#include #include #include using namespace std;float rtri;float rquad;GLfloat points0[5][3] { {0,1,0},{-1,-1,1},{1,-1,1},{1,-1,-1},{-1,-1,-1} };GLfloat points1[8][3] { {1,1,-1},{-1,1,-1},{-1,1,1},{1,1,1},{1,-1,1},{-1,-1,1},{-1,-1,-1},{1,-1,-1} };//四棱…

WSO2 ESB的一种消息传递方式

正如我之前在WSO2 ESB工作时所发布的那样。 为了更好地理解此ESB&#xff0c;我一直在浏览示例 &#xff08;尚未完成所有示例 &#xff09;。 示例12是关于与ESB的单向消息传递&#xff0c;并使用TCP监视器使其可见。 我之前已经介绍过如何设置类似的工具“ TcpTunnelGUI”&am…

Eclipse-Java代码规范和质量检查插件-Checkstyle

CheckStyle是SourceForge下的一个项目&#xff0c;提供了一个帮助JAVA开发人员遵守某些编码规范的工具。它能够自动化代码规范检查过程&#xff0c;从而使得开发人员从这项重要但枯燥的任务中解脱出来。它可以根据设置好的编码规则来检查代码。比如符合规范的变量命名&#xff…

介绍一款好用 mongodb 可视化工具

最近想自己搭建一个个人博客&#xff0c;所以学了下mongodb&#xff0c;mongodb是用命令行输入的&#xff0c;有些人可能不太习惯&#xff0c;我自己找了下mongodb的一些可视化工具&#xff0c;发现了一款adminmongo很好用&#xff0c;这里介绍给你们用一下。 github地址&#…

用CSS3来代替JS实现交互

【CSS3和JS】 对于CSS了解的同学都知道&#xff0c;CSS的实现是最底层的&#xff0c;在实现方式和性能上都不是&#xff0c;JS这种提供接口的脚本可比的&#xff1b;从CSS3的动画和JS动画对比角度来看两者&#xff0c;会更清晰&#xff1b;而且随着前端框架的使用&#xff0c;…