【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集 ...
随机推荐
- svg笔记----------path篇
每个路径都必须以moveto 命令开始 moveto.lineto和closepath <path d="M 10 10 L 100 10z"/> 大写字母命令的坐标是 ...
- Entity Framework 学习中级篇3—存储过程(中)
目前,EF对存储过程的支持并不完善.存在以下问题: l EF不支持存储过程返回多表联合查询的结果集. l EF仅支持返回返回某个表的全部字段,以便转换成对应的实体.无法 ...
- icon大小
ldpi mdpi hdpi xhdpi xxhdpi
- 文件系统满的话(filesystem full)，该如何处理。
#!/bin/bash function ergodic(){ ` do "/"$file ] then ergodic $"/"$file else loca ...
- css3的box-sizing
给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示.用box-sizing:border-box,可以去除边框的占位. 浏览器支持IE9以上及火狐.谷歌.Ope ...
- POJ 2387
最短路模板 dij 和 spfa 都可以 spfa: #include<stdio.h> #include<string.h> #include<cstring> ...
- LA 4329 BIT 分治
#include <cstdio> #include <queue> #include <cstring> #include <iostream> #i ...
- iOS NSString类中获取子字符串
NSString类中提供了这样三个方法用于获取子字符串: – substringFromIndex://取字符串长度从0开始,当index=str.length时字符串为空"" – ...
- PID控制学习笔记（二）
不管是基本的PID控制还是变形的PID控制算法,其核心都是对输入信号(设定值信号.测量信号或者偏差信号等)做基本的比例.积分.微分运算,最终提供给被控过程良好的调节信号. 在过程控制仪表,特别是在数字 ...
- Swift & OC 混编 浅析
转载自:http://www.infoq.com/cn/articles/wangyi-cartoon-swift-mixed-practice?utm_campaign=rightbar_v2&am ...