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就会显得很方便. ...
随机推荐
- Springboot接入RabbitMQ详细教程
本文适用于对 RabbitMQ 有所了解的人,在此不讨论MQ的原理,只讨论如何接入.其实Spring Boot 集成 RabbitMQ 非常简单,本文章使用的是Spring Boot 提供了sprin ...
- 抖音爬虫教程，python爬虫采集反爬策略
一.爬虫与反爬简介 爬虫就是我们利用某种程序代替人工批量读取.获取网站上的资料信息.而反爬则是跟爬虫的对立面,是竭尽全力阻止非人为的采集网站信息,二者相生相克,水火不容,到目前为止大部分的网站都还是可 ...
- 简丽Framework-开篇
简丽Framework-开篇 简丽Framework 是一个开源java Web开发框架. 开源的框架.库.组件等比比皆是,每个开源产品都有它的定位和价值. 简丽Framework的定位是 ...
- Centos7路由设置
再添加路由时,很多时候都是采用命令行用route添加的.但是在机器重启后.就失效了.这里也是参考了几位博主的经验 作出以下记载 一:路由表常用设置 1.route命令路由表常用设置: //添加到主机的 ...
- Java学习_反射
什么是反射? 反射就是Reflection,Java的反射是指程序在运行期可以拿到一个对象的所有信息. 反射是为了解决在运行期,对某个实例一无所知的情况下,如何调用其方法. JAVA反射机制是在运行状 ...
- windows 10放大125%后字体模糊(已解决)、win10 文字放大之后变模糊 解决办法
windows 10放大125%后字体模糊解决办法 百度搜索 "Windows10_DPI_FIX" 或者用这个地址下载下载地址 https://gallery.technet ...
- 行业动态 | DataStax 2021年新年预测
Happy New Year! 今天是元旦,DataStax在此祝大家2021新年快乐 o(*≧▽≦)ノ 新的一年中,我们也将为大家提供更多有用的资源,并组织更多有意义的活动. 同时我们 ...
- 被自己以为的GZIP秀到了
问题的开始 我司某产品线有这么一个神奇接口 (https://host/path/customQuery) 该接口在预发或线上缓存正常的情况下TTFB为150ms左右(可以认为服务处理时间差不多就是T ...
- AjaxControlToolKit CalendarExtender(日历扩展控件)的使用方法
设置CalendarExtender的TargetControlID为需要显示日期的TextBox的ID,textBox控件的readOnly属性设置为 false ,这样就可以点击textbox控件 ...
- 初识分布式图数据库 Nebula Graph 2.0 Query Engine
摘要:本文主要介绍 Query 层的整体结构,并通过一条 nGQL 语句来介绍其通过 Query 层的四个主要模块的流程. 一.概述 分布式图数据库 Nebula Graph 2.0 版本相比 1.0 ...