【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集 ...
随机推荐
- jquery滚动条加载数据
//滚动条 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $( ...
- postfix队列管理
队列管理单元的服务器程序--qmgr,是整个postfix系统的中心枢纽.所有邮件,包括等待送出与从外界收进来的,都必须通过队列.了解队列的运行原理以及postfix如何处理队列,有助于你解决问题. ...
- 12.04 ubuntu 更改IP
在一个局域网里面,如果是自动获取IP,就会导致IP冲突 进入要连接的热点进行设置 IPV4 Setting address netmask ...
- octet-stream
firefox突然变成了用gedit打开pdf文件, Where the link to http://download.jw.org/files/media_m...E_20150201.pdf c ...
- asp之servervariables全部显示
<%Response.Write("<p>")%><%for each i in request.servervariables%> <% ...
- Mysql转化blob为可读
-- info 为列名 SELECT convert(info using latin1) FROM drupal755.system; SELECT convert(info using utf8) ...
- 转 EXPDP ORA-39095 ORA-3909 错误
今天帮同事在测试库上导出两张表,第一张表大小为30M,第二章表大小为7G,以下是expdp语法 expdp tranuser/******** parallel=4 content=data_only ...
- mybatis 的一点问题
写法1: public User queryUserByUsername(String username); 写法2: public User queryUserByUsername(@Par ...
- jquery 展开关闭效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js入门实例
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My F ...