【HighCharts系列教程】四、颜色属性——colors
一、Colors属性说明
配置Colors，可以自定义数据列的颜色。
默认下colors就包含一系列颜色，在个性化或需要调整颜色的顺序下，我们可以配置该属性。
二、colors属性详解
Colors属性中包含的是一个十六进制颜色代码数组。
| 参数 | 默认值 | 说明 |
|---|---|---|
|
一组颜色代码，如 colors:['#4572A7','#89A54E',...] |
colors:[ '#4572A7', ] |
1、颜色代码可以是十六进制，也可以是英文单词， 还可以是RGB，如同css 2、默认是从第一个数据列起调用第一个颜色代码， 有多少个数据列调用相应数量的颜色 3、当数据列大于默认颜色数量时，重复从第一个 颜色看是调用 |
三、实例说明
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//HighCharts中chart属性配置
chart: {
renderTo: 'container',//div 标签
type: 'pie',//图表类型
},
/******************
**Colors-颜色属性为可选配置
**通过配置配置colors，可以轻松的设置数据列的颜色
******************/
colors:[
'#000000',//黑
'#FF0000',//红
'#00FF00',//绿
'#0000FF',//蓝
'#FFFF00',//黄
'#FF00FF',//紫
'#FFFFFF',//紫
],
credits : {
href:'http://www.52wulian.org',
position: {
x:-30,
y:-30
},
style:{
color:'red',
fontWeight:'bold'
},
text:'我爱物联网'
},
xAxis: {
categories: ['1','2','3','4','5']
},
series: [{
name: 'series1',
data: [2,4,5,9,2]
}]
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
四、实现截图
五、在线演示
六、源码下载
【HighCharts系列教程】四、颜色属性——colors的更多相关文章
- C#微信公众号开发系列教程四（接收普通消息）
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
- NGUI系列教程四（自定义Atlas，Font）
今天我们来看一下怎么自定义NGUIAtlas,制作属于自己风格的UI.第一部分:自定义 Atlas1 . 首先我们要准备一些图标素材,也就是我们的UI素材,将其导入到unity工程中.2. 全选我们需 ...
- 黄聪：Microsoft Enterprise Library 5.0 系列教程(四) Logging Application Block
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(四) Logging Application Block 企业库日志应用程序模块工作原理图: 从上图我们可以 ...
- Fastify 系列教程四 （求对象、响应对象和插件）
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...
- CRL快速开发框架系列教程四(删除数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- Android Studio系列教程四--Gradle基础
Android Studio系列教程四--Gradle基础 2014 年 12 月 18 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
- 【HighCharts系列教程】一、认识Highcharts
一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...
- Unity3D脚本中文系列教程(四)
http://dong2008hong.blog.163.com/blog/static/4696882720140302451146/ Unity3D脚本中文系列教程(三) 送到动画事件. ◆ va ...
- Influx Sql系列教程四：series/point/tag/field
influxdb中的一条记录point,主要可以分为三类,必须存在的time(时间),string类型的tag,以及其他成员field:而series则是一个measurement中保存策略和tag集 ...
随机推荐
- 一个小知识点强引用__strong 弱引用__weak
__weak的类型的指针是不会影响对象的释放 当系统释放后 会自动的指向nil: __Strong 至少有一个__Strong类型的指针是 对象不会释放
- ios中的关键词retain release
内存分析 在函数中只要用new alloc copy 这样的分配空间时 则计算器retain就要为一 每调用一次就要加一 在.m文件中引用手动计数时 一定要调用[super dealloc]这 ...
- Ansible8：Playbook循环【转】
在使用ansible做自动化运维的时候,免不了的要重复执行某些操作,如:添加几个用户,创建几个MySQL用户并为之赋予权限,操作某个目录下所有文件等等.好在playbook支持循环语句,可以使得某些需 ...
- 关于Select * 与Select 字段名 的问题！
[转]http://blog.csdn.net/tongyu2009/article/details/8252418 1.SELECT * 语句取出表中的所有字段,不论该字段的数据对调用的应用程序是否 ...
- Hibernate 系列教程1-枚举单例类
你还在为不知道怎样正确使用Hibernate而纠结吗 你还在为不知道怎样配置映射文件而郁闷吗 枚举单例(Enum Singleton) 是实现单例模式的一种方式而已,不过写法简单,创建枚举默认也是线程 ...
- HDU 1698 <线段树，区间set>
题目连接 题意: 一条长为N的铜链子,每个结点的价值为1.有两种修改,l,r,z; z=2:表示把[l,r]区间内链子改为银质,价值为2. z=3:表示把[l,r]区间内链子改为金质,价值为3. 思路 ...
- PostConstruct注解
应用场景:当你需要往Bean里注入一个其父类中定义的属性,而你又无法复写父类的属性或属性的setter方法时 public class UserDaoImpl extends HibernateDao ...
- 视频 -> 帧 浅析
原创:转载请注明出处 关于帧率 首先以下几个概念必须弄清楚 1.一个帧就是一个画面 2.视频有无数个帧组成 3.表达时间的量 CMTime 的定义: typedef struct { CMTimeV ...
- html5利用websocket完成的推送功能
利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0,一些东西是自己琢磨的,也不知道恰不恰当,不恰当处,还请各位见谅,并指出. 程序简单来说,就是客户A可以发送消息给客户 ...
- 第一章C语言简介及输出函数 上机部分
第一章C语言简介及输出函数 上机1 #include "stdio.h" void main() { printf("南方学院,你好!\n"); printf( ...