【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,一经查实,立即删除!

相关文章

java单击切换div_[Java教程]点击同一按钮实现div的隐藏与现实切换

[Java教程]点击同一按钮实现div的隐藏与现实切换0 2016-01-16 21:00:12点击同一按钮实现div的隐藏与现实切换:在很多应用中&#xff0c;都有这样的功能&#xff0c;点击同一个按钮可以实现div的隐藏或者现实&#xff0c;当然操作的并非必须是按钮或者div&#xff0c;不过原理是…

python链表的实现,有注释

class Node(): #node实现,每个node分为两部分:一部分含有链表元素,成数据域;另一部分为指针,指向下一个 __slots__[_item,_next] #限定node实例的属性??? 这个元素就是有两部分组成,,,一个指针一个数据,,,但是链表头就不是这样了 def __init__(self…

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

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

Java 8:正在运行的CompletableFuture

在Java 8中全面研究了CompletableFuture API之后&#xff0c;我们准备编写一个简单的Web搜寻器。 我们已经使用ExecutorCompletionService &#xff0c; Guava ListenableFuture和Scala / Akka解决了类似的问题。 我选择了相同的问题&#xff0c;以便轻松比较方法和实现技术。 …

java能不能修改文件大小信息_java上机考试3

考号: 000128000091 姓名: 张天義 学号: 1040610329 班级: 本科(计算机、微电、电工、经管)->计算机科学与技术 00:13:25一、单选(共80分)1. int count1;for(int i1;i<5;i){countcounti;}System.out.println(count);上述代码执行后的输出结果是A、15B、1C、16D、5标记此题…

(网页)中的简单的遮罩层

html: <div id"test"></div><div id"log_window"> <!--<a href"javascript:cancel_shield()">关闭</a>--> <!--<img src"assets/css/images/loading.gif" />--> <p style"fo…

即使在jdk中也有错误的代码

Java 7&#xff0c;TreeSet和NullPointerException。 最近&#xff0c;我尝试用Java 7编译一个用Java 6开发的项目。在执行测试过程中发生了很多有趣的事情&#xff0c;在Java 6中使用Java 7平稳运行的测试失败了&#xff01; 因此&#xff0c;我必须理解为什么&#xff0c;这就…

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中的…

在Android项目中使用AspectJ

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 转载请表明出处&#xff1a;http://www.cnblogs.com/cavalier-/p/8888459.html 什么是AOP AOP是 Aspect Oriented Programming 的缩写&#xff0c;即面向切面编程&#xff0c;和平常遇到的面向对象O…

LVM 逻辑卷 (logica volume manager)

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

java中u怎么用_Java中interrupt的使用

通常我们会有这样的需求&#xff0c;即停止一个线程。在java的api中有stop、suspend等方法可以达到目的&#xff0c;但由于这些方法在使用上存在不安全性&#xff0c;会带来不好的副作用&#xff0c;不建议被使用。具体原因可以参考Why is Thread.stop deprecated。在本文中&am…

当Maven依赖插件位于

问题&#xff1a; 我们进行了一个集成测试&#xff0c;该测试创建了一个Spring ClassPathXmlApplicationContext &#xff0c;同时这样做导致NoSuchMethodError爆炸。 事实证明&#xff0c;我们对Spring构件的依赖版本存在冲突。 这本身不是一个不寻常的问题-使用Maven依赖插件…

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…

css高度已知,左右定宽,中间自适应三栏布局

css高度已知&#xff0c;左右定宽&#xff0c;中间自适应三栏布局&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale…

java使用impala存放多条sql_Impala基于内存的SQL引擎的详细介绍

数据存储使用相同的存储数据池都支持把数据存储于HDFS, HBase。元数据&#xff1a;两者使用相同的元数据SQL解释处理&#xff1a;比较相似都是通过词法分析生成执行计划。执行计划&#xff1a;Hive: 依赖于MapReduce执行框架&#xff0c;执行计划分成 map->shuffle->redu…

Android Studio打包以及Gradle配置构建

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

去除inline-block间隙的几种方法

为什么会产生间隙&#xff1f; 由于编写代码时的美观和可读性&#xff0c;在代码中添加回车或空格而产生的间隙。 html代码&#xff1a; <ul class"container"><li></li><li></li><li></li><li></li><li&…

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下是…