【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集 ...
随机推荐
- DB层级
最上层: 业务层 负载均衡: LVS 代理层: DB-PROXY DB层: DB主库 DB从库 随着DB出 ...
- JVM 设置
按照基本回收策略分 引用计数(Reference Counting) 标记-清除(Mark-Sweep) 复制(Copying) 标记-整理(Mark-Compact) 按分区对待的方式分 增量收集( ...
- FirstOrDefault()的重载方法
FirstOrDefault方法的使用总结: 现有一集合对象list, 其中集合对象调用FirstOrDefault()方法, list.FirstOrDefault()返回集合中第一个元素, 若集合 ...
- 常用的opengl函数（三）
glBlendFunc 定义像素算法. void WINAPI glBlendFunc(GLenum sfactor,GLenum dfactor); 参数编辑 sfactor 指定红绿蓝和 al ...
- HDOJ3743<分治>
题意:求一个排列的逆序数. #include<cstdio> #include<iostream> #include<algorithm> const int ma ...
- tomcat内存优化问题
Java内存组成 1) 堆 运行时数据区域,所有类实例和数组的内存均从此处分配.Java 虚拟机启动时创建.对象的堆内存由称为垃圾回收器 的自动内存管理系统回收. 堆由两部分组成: 其中eden+fr ...
- 屏幕的尺寸（厘米）、屏幕分辨率（像素）、PPI它们之间是什么关系
屏幕的尺寸(厘米).屏幕分辨率(像素).PPI它们之间是什么关系? 添加评论 分享 赞同2反对,不会显示你的姓名 知乎用户,数据ETL,UNITY3D 刘大侠.如果 赞同 以iphone4 为例,分辨 ...
- 使用NGUI进行类似Button的操作
下面例子以Label和Sprite为例,进行说明如何在NGUI中对控件添加单击响应的事件方法. 首先在UIRoot下添加Label控件,然后Scene场景中右键Label-->Attach--& ...
- Java Web 错误排查
排查404 1. 检查web.xml,有没有放在web-inf下面,再检查过滤器有没有配置 <filter> <filter-name>struts</filter-na ...
- springmvc传递json数据到前台显示
需要两个包 jackson-core-asl, jackson-mapper-asl controller @RequestMapping(value="/findEduList" ...