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:,
width : ,
height : ,
coordinate:{
background_color:'#fefefe',
scale:[{
position:'left',
start_scale:,
end_scale:,
scale_space:,
listeners:{
parseText:function(t,x,y){
return {text:t+"%"}
}
}
}]
}
}).draw();
});
一个简单的图表就完成啦!

6、代码说明

//定义数据
var data = [
{name : 'H',value : ,color:'#a5c2d5'},
{name : 'E',value : ,color:'#cbab4f'},
{name : 'L',value : ,color:'#76a871'},
{name : 'L',value : ,color:'#76a871'},
{name : 'O',value : ,color:'#a56f8f'},
{name : 'W',value : ,color:'#c12c44'},
{name : 'O',value : ,color:'#a56f8f'},
{name : 'R',value : ,color:'#9f7961'},
{name : 'L',value : ,color:'#76a871'},
{name : 'D',value : ,color:'#6f83a5'}
];
$(function(){
var chart = new iChart.Column2D({
render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
data: data,//绑定数据
title : 'Hello World\'s Height In Alphabet',//设置标题
width : ,//设置宽度,默认单位为px
height : ,//设置高度,默认单位为px
shadow:true,//激活阴影
shadow_color:'#c7c7c7',//设置阴影颜色
coordinate:{//配置自定义坐标轴
scale:[{//配置自定义值轴
position:'left',//配置左值轴
start_scale:,//设置开始刻度为0
end_scale:,//设置结束刻度为26
scale_space:,//设置刻度间距
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

【ichart】简单的统计图表ichart.js的使用的更多相关文章

  1. PNotify – 简单易用的 JS 通知,消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  2. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  3. 简单粗暴地理解js原型链--js面向对象编程

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  4. 从现在开始,使用简单优雅的validata.js

    表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现 使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情 <form data-validate> Enter: ...

  5. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

  6. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  7. 一些简单的css和js知识

    这几天主要做的是前端网页的调整和页面UI的优化方面的内容.这中间主要是学习了一些基本的HTML和css样式的基本元素的属性.设置行高的line-heght属性,设置窗口的浮动用position属性,设 ...

  8. 关于js中select的简单操作,以及js前台计算,span简单操作

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 【最简单的方法】js判断字符串是否为JSON格式(20180115更新)

    前言 针对 “js判断字符串是否为JSON格式” 这个问题,在网上查了许多资料,都没找到自己想要的答案. 但是看到这个帖子<js判断字符串是否为JSON格式>后,突然灵光一闪,想到一种很简 ...

随机推荐

  1. 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场

    判断终端的类型.安卓.ios.微信.qq function  GetMobelType()  {                 var  browser  =   {                 ...

  2. 删除sheet

    /// <summary> /// 删除sheet /// </summary> /// <param name="fileName">< ...

  3. MySQL导入SQL语句报错 : MySQL server has gone away (已解决)

    MySQL server has gone away 解决的方法其实很简单,我相信也有很多人遇到了这个问题.比如DZ论坛,安装好服务器,但是清空缓存等操作数据库的动作,运行时间稍长就会出现 MySQL ...

  4. PHP字符串函数之 strcmp strncmp strcasecmp strncasecmp strnatcmp strnatcasecmp

    strcmp – 二进制安全字符串比较 strncmp – 二进制安全比较字符串开头的若干个字符 strcasecmp – 二进制安全比较字符串(不区分大小写) strncasecmp – 二进制安全 ...

  5. vue-cli脚手架项目按需引入elementUI

    https://www.jianshu.com/p/40da0ba35ac1 Couldn't find preset "es2015" relative to directory ...

  6. 微信小程序如何调用API实现数据请求-wx.request()

    前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...

  7. 使用node.js + json-server + mock.js 搭建本地开发mock数据服务

    在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...

  8. nrf52832 SDK 15.3.0 Flash 操作

    debug中遇到的问题: 1,写入数据,读出来不对 2,看之前被人写的代码发现,读flash直接用的标准C库函数:memcpy,但是,写用的专门的flash写接口.所以,我这里两个疑问: A,写fla ...

  9. JavaScript中继承的那些事

    引言 JS是一门面向对象的语言,但是在JS中没有引入类的概念,之前特别疑惑在JS中继承的机制到底是怎样的,一直学了JS的继承这块后才恍然大悟,遂记之. 假如现在有一个“人类”的构造函数: functi ...

  10. C# datagridview分页功能

    winform开发是或多或少都会接触datagridview控件,如果数据量大,那么必须使用分页功能,但是datagridview自身并没有分页,所以我们要自己实现.在网上搜了一些发现没有太适合自己的 ...