【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集 ...
随机推荐
- TCP/IP，http，socket，长连接，短连接——小结。
来源:http://blog.chinaunix.net/uid-9622484-id-3392992.html TCP/IP是什么? TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. ...
- IE10以下的placeholder不兼容问题
$(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(fun ...
- 脚本添加crontab任务【转】
今天朋友问,计划任务是用crontab -e来添加的,如何使用脚本来添加呢? 在执行crontab -e命令时,会在/var/spool/cron目录下创建一个文件,文件的名称是你当前的用户名,内容就 ...
- 当@PathVariable遇上中文和点
当@PathVariable遇上中文和点 Spring MVC从3.0开始支持REST,而主要就是通过@PathVariable来处理请求参数和路径的映射. 由于考虑到SEO的缘故,很多人喜欢把新闻 ...
- php根据时间显示刚刚,几分钟前,今天,昨天的实现代码
如果大家有更好的方案欢迎交流 function diffBetweenTwoDay($pastDay){ $timeC = time() - strtotime($pastDay); $dateC = ...
- Qt之打包发布（NSIS详解）
来源:http://blog.sina.com.cn/s/blog_a6fb6cc90101fer8.html 发布方式 Qt发布的时候,通常使用两种方式: (1)静态编译 (2)动态编译 ...
- maven source
accepted To download sources for your dependencies: mvn eclipse:eclipse -DdownloadSources=true To at ...
- ANT 操控 ORACLE数据库实践
Ant 执行系统命令没有任何问题,这次实际系统命令中可以说遇到了两个问题,一个是启动服务的命令是含有空格的,第二个如何备份数据库可以自动加上日期. 首先,我们启动oracle数据库,操作有两个: 1. ...
- BigDecimal加减乘除运算
java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val)Translates a doubl ...
- UVALive - 3942 Remember the Word
input 字符串s 1<=len(s)<=300000 n 1<=n<=4000 word1 word2 ... wordn 1<=len(wordi)<=10 ...