ichartjs插件的使用
项目中可能会用到饼状图、柱状图、环形图等，ichartjs是一个很不错的插件，体量小，只需引入ichart.1.2.1.min.js即可满足基础需求，github下载地址是：https://github.com/wanghetommy/ichartjs
先来看一个效果图：
一、引入ichart.1.2.1.min.js及jquery：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iChart</title>
<meta charset="utf-8" />
<script src="scripts/ichart.1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
二、所需数据（json数组）：
var data = [
{ name: 'UC浏览器', value: 40.0, color: '#4572a7' },
{ name: 'QQ浏览器', value: 37.1, color: '#aa4643' },
{ name: '欧朋浏览器', value: 13.8, color: '#89a54e' },
{ name: '百度浏览器', value: 1.6, color: '#80699b' },
{ name: '海豚浏览器', value: 1.4, color: '#92a8cd' },
{ name: '天天浏览器', value: 1.2, color: '#db843d' },
{ name: '其他', value: 4.9, color: '#a47d7c' }
];
三、创建iChart对象（本例中使用2D环形图：iChart.Donut2D）：
var chart = new iChart.Donut2D({
render: 'canvasDiv', //绑定的标签id
data: data, //数据
title: { //标题
text: '2012年第3季度中国第三方手机浏览器市场份额',
color: '#3e576f'
},
footnote: { //页脚
text: 'ichartjs.com',
color: '#486c8f',
fontsize: 11,
padding: '0 38'
},
center: { //环形图中间的文本
text: '90%',
color: '#3e576f',
shadow: true,
shadow_blur: 2,
shadow_color: '#557797',
shadow_offsetx: 0,
shadow_offsety: 0,
fontsize: 40
},
sub_option: {
label: { //标注
background_color: null,
sign: true, //设置启用label的小图标
padding: '0 4',
border: {
enable: false,
color: '#666666'
},
fontsize: 15,
fontweight: 600,
color: '#4572a7'
},
border: {
width: 2,
color: '#ffffff'
}
},
shadow: true, //开启引用
shadow_blur: 6,
shadow_color: '#aaaaaa',
shadow_offsetx: 0,
shadow_offsety: 0,
background_color: '#fefefe',
offset_angle: -120, //逆时针偏移120度
showpercent: false, //关闭百分比
decimalsnum: 2, //小数点位数
width: 800,
height: 400,
radius: 120
});
四、开启绘图：
chart.draw();
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iChart</title>
<meta charset="utf-8" />
<script src="scripts/ichart.1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="canvasDiv" style="border:1px solid blue"> </div>
<script>
$(function () { var data = [
{ name: 'UC浏览器', value: 40.0, color: '#4572a7' },
{ name: 'QQ浏览器', value: 37.1, color: '#aa4643' },
{ name: '欧朋浏览器', value: 13.8, color: '#89a54e' },
{ name: '百度浏览器', value: 1.6, color: '#80699b' },
{ name: '海豚浏览器', value: 1.4, color: '#92a8cd' },
{ name: '天天浏览器', value: 1.2, color: '#db843d' },
{ name: '其他', value: 4.9, color: '#a47d7c' }
]; var chart = new iChart.Donut2D({
render: 'canvasDiv', //绑定的标签id
data: data, //数据
title: { //标题
text: '2012年第3季度中国第三方手机浏览器市场份额',
color: '#3e576f'
},
footnote: { //页脚
text: 'ichartjs.com',
color: '#486c8f',
fontsize: 11,
padding: '0 38'
},
center: { //环形图中间的文本
text: '90%',
color: '#3e576f',
shadow: true,
shadow_blur: 2,
shadow_color: '#557797',
shadow_offsetx: 0,
shadow_offsety: 0,
fontsize: 40
},
sub_option: {
label: { //标注
background_color: null,
sign: true, //设置启用label的小图标
padding: '0 4',
border: {
enable: false,
color: '#666666'
},
fontsize: 15,
fontweight: 600,
color: '#4572a7'
},
border: {
width: 2,
color: '#ffffff'
}
},
shadow: true, //开启引用
shadow_blur: 6,
shadow_color: '#aaaaaa',
shadow_offsetx: 0,
shadow_offsety: 0,
background_color: '#fefefe',
offset_angle: -120, //逆时针偏移120度
showpercent: false, //关闭百分比
decimalsnum: 2, //小数点位数
width: 800,
height: 400,
radius: 120
}); chart.draw();
})
</script>
</body>
</html>
转载于：https://blog.csdn.net/qq_39306736
ichartjs插件的使用的更多相关文章
- 如何在我们项目中利用开源的图表（js chart）
最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...
- js chart
如何在我们项目中利用开源的图表(js chart) 最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一 ...
- 前端技术-js插件
学习良好的规范,培养良好的书写习惯,苦练基本功才能快速成长. http://www.cnblogs.com/cssbbs/category/758479.html 常用插件 插件名 使用范围 说明 官 ...
- 转：几款免费的图表js插件
1,ichartjs(国产)(http://www.ichartjs.com/) ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件
昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...
- 使用Visual Studio SDK制作GLSL词法着色插件
使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...
随机推荐
- Spring Data JPA 整合Spring
1.1 Spring Data JPA 与 JPA和hibernate之间的关系 JPA是一套规范,内部是有接口和抽象类组成的.hibernate是一套成熟的ORM框架,而且Hibernate实现 ...
- matplotlib的学习6-annotation的标注
import matplotlib.pyplot as plt import numpy as np ''' 当图线中某些特殊地方需要标注时,我们可以使用 annotation. matplotlib ...
- 你只用do-while来实现循环？太浪费了！
这是道哥的第010篇原创 目录 前言 在宏定义中的妙用 错误的宏定义 比较好的宏定义 另一个也不错的宏定义 在函数体中的妙用 函数功能:返回错误代码对应的错误字符串 函数功能:通过TCP Socket ...
- sqlserver varchar和Nvarchar区别
sql server中的varchar和Nvarchar有什么区别? 答:varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 ...
- python保存二维列表到txt文件，读取txt文件里面的数据转化为二维列表
源码: # 读文件里面的数据转化为二维列表 def Read_list(filename): file1 = open(filename+".txt", "r" ...
- HTML文本格式化标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...
- 变量提升（hoisting）
JavaScript的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行.这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting). con ...
- Logstash-input-jdbc同步mysql数据到ES － sql_last_value
问题:使用 Logstash-input-jdbc同步mysql到ES, 当中使用了 sql_last_value ,如何重新同步? 答: logstash把上一次同步的最后一条记录id写到 c:\用 ...
- git-廖雪峰版教程学习笔记
- 串的模式匹配算法1 BF算法
BF算法 字符串的模式匹配不一定要从主串的第一个位置开始,可以指定主串中查找的起始位置 pos. 2. 算法步骤: 1)分别利用计数器指针 i 和 j 指定主串和模式串即小字符串待比较的位置,初始化为 ...