学习笔记:Highcharts
(Highcharts 167K; ECharts 354K; jqChart 240K),如果用于网络,Highchart最小
Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
http://www.hcharts.cn/product/download.php 下载
一个饼图小例子:
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/highcharts/4.2.5/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#pieContainer').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {text: ''},//这里是标题
tooltip: {
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' //饼上显示文字:第1种
pointFormat: '{series.name}: <b>{point.percentage}%</b>', //饼上显示文字:第2种
//formatter: function() {
// return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; //饼上显示文字:第3种
//}
},
credits: {
enabled:false //去掉水印
//text: 'e.com',
//href: 'http://www.e.com'
},
plotOptions: { //饼外面拉出的黑线和文字
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true, //设为false,不显示:饼外面拉出的黑线和文字
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage} %'
//format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
colors: ['#1ccb6a','#1ccb6a','#1ccb6a','#f7ef1e','#f7ef1e','#f7ef1e','#f7ef1e'],//指定颜色
data: [
['布艺装饰',10],
['家电',20],
['家具',27], ['设计费',5],
['管理费',4],
['人工费',10],
['材料费',24]
/*
//这个是被突出的扇形
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}*/ ]
}]
});
});
</script>
<div id="pieContainer" style="width:600px;height:400px;"></div>
看API:
http://www.hcharts.cn/api/index.php#plotOptions 饼外面显示的文字
http://www.hcharts.cn/api/index.php#series.data 饼图:传入的数据
..
学习笔记:Highcharts的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
- ucos实时操作系统学习笔记——任务间通信(消息)
ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...
随机推荐
- DHCP : 网络世界身份的获取
DHCP 协议 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)前身是 BOOTP 协议,是一个局域网的网络协议.它是一种 服务器- 客户端 的工作 ...
- PHP 遍历文件夹下的文件以及子文件夹
// 递归的方式实现function my_dir( $dir ){ if ( !is_dir($dir) ) { return 'not dir';die(); } $files = array() ...
- 数据仓库专题(2)-Kimball维度建模四步骤
一.前言 四步过程维度建模由Kimball提出,可以做为业务梳理.数据梳理后进行多维数据模型设计的指导流程,但是不能作为数据仓库系统建设的指导流程.本文就相关流程及核心问题进行解读. 二.数据仓库建设 ...
- Hard commits, soft commits and transaction logs
“Hard commits are about durability, soft commits are about visibility“ Transaction Logs 首先介绍下solrcl ...
- SVM的sklearn实现
转载:豆-Metcalf 1)SVM-LinearSVC.ipynb-线性分类SVM,iris数据集分类,正确率100% """ 功能:实现线性分类支持向量机 说明:可以 ...
- Hive的UDF是什么?
首先我们学习hadoop的时候,为了让我们不太会java语言但是对SQL很熟悉的工程师能够操作基本的mapreduce计算过程,Hive被设计出来了.Hive就好比是hadoop在执行MR(mapre ...
- Java学习——Applet菜单
程序功能:在窗口中添加菜单栏,在菜单栏添加菜单项,并添加下拉菜单和 2 级菜单,通过选择菜单项可以执行不同操作,生成如下图所示窗口. package cys; import java.awt.*; i ...
- R语言 实验三 数据探索和预处理
计算缺失值个数 计算缺失率 简单统计量:计算最值 箱形图分析 分布分析:画出频率直方图 统计量分析:对于连续属性值,求出均值以及标准差 缺失值处理:删除法 去除 ...
- folly无锁队列,尝试添加新的函数(续)
基于上一篇文章,dropHead取出节点后,删除节点,会出现内存访问的问题.按照这个逻辑,如果将移出的节点保存到一个无锁队列中,然后在需要节点的时候,从这个备用的无锁队列中取出节点,那么应该就可以避开 ...
- MySQL 二进制文件恢复数据基础版本
先来一段 自行体会 #---------------------------------------------------------------------------------- #模拟通过b ...