一、Colors属性说明

配置Colors，可以自定义数据列的颜色。

默认下colors就包含一系列颜色，在个性化或需要调整颜色的顺序下，我们可以配置该属性。

二、colors属性详解

Colors属性中包含的是一个十六进制颜色代码数组。

参数 默认值 说明

一组颜色代码，如

colors:['#4572A7','#89A54E',...]

colors:[

'#4572A7', 
  '#AA4643', 
  '#89A54E', 
  '#80699B', 
  '#3D96AE', 
  '#DB843D', 
  '#92A8CD', 
  '#A47D7C', 
  '#B5CA92'

]

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的更多相关文章

  1. C#微信公众号开发系列教程四（接收普通消息）

    微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...

  2. NGUI系列教程四（自定义Atlas，Font）

    今天我们来看一下怎么自定义NGUIAtlas,制作属于自己风格的UI.第一部分:自定义 Atlas1 . 首先我们要准备一些图标素材,也就是我们的UI素材,将其导入到unity工程中.2. 全选我们需 ...

  3. 黄聪：Microsoft Enterprise Library 5.0 系列教程(四) Logging Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(四) Logging Application Block 企业库日志应用程序模块工作原理图:   从上图我们可以 ...

  4. Fastify 系列教程四 （求对象、响应对象和插件）

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

  5. CRL快速开发框架系列教程四(删除数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  6. Android Studio系列教程四--Gradle基础

    Android Studio系列教程四--Gradle基础 2014 年 12 月 18 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang ...

  7. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

    本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...

  8. 【HighCharts系列教程】一、认识Highcharts

    一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...

  9. Unity3D脚本中文系列教程(四)

    http://dong2008hong.blog.163.com/blog/static/4696882720140302451146/ Unity3D脚本中文系列教程(三) 送到动画事件. ◆ va ...

  10. Influx Sql系列教程四：series/point/tag/field

    influxdb中的一条记录point,主要可以分为三类,必须存在的time(时间),string类型的tag,以及其他成员field:而series则是一个measurement中保存策略和tag集 ...

随机推荐

  1. find unique values in an array

    Problem: given an array that contains duplicates (except one value), find the one value that does no ...

  2. centos7配置ip

    vi /etc/sysconfig/network-scripts/ifcfg-enp0s3 ONBOOT=yes 重启ip服务 systemctl restart network.service 开 ...

  3. Qt之打包发布（NSIS详解）

    来源:http://blog.sina.com.cn/s/blog_a6fb6cc90101fer8.html 发布方式    Qt发布的时候,通常使用两种方式:   (1)静态编译  (2)动态编译 ...

  4. 算法：1！+（1！+3！）+（1！+3！+5！) + ( 1! + 3! + 5! + 7! + 9!)＋....＋（1！+3！+5！＋ ... + m!）

    -(void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{ / ...

  5. MPEG1的码流层次与各层次的作用

    1. 序列层(Sequence layer) 序列层主要用于为随机播放提供全局参数支持,这些参数包括图像宽高.像素高宽比.帧率.码率.VBV大小.帧内量化矩阵.帧间量化矩阵. 2. 图像组层(Grou ...

  6. .net ToString()用法详解与格式说明

    我们经常会遇到对时间进行转换,达到不同的显示效果,默认格式为:2006-6-6 14:33:34 如果要换成成200606,06-2006,2006-6-6或更多的格式该怎么办呢? 这里将要用到:Da ...

  7. Java学习笔记之I/O

    package com.chinasofti.javase20160819; import java.io.BufferedReader; import java.io.BufferedWriter; ...

  8. HTML+CSS Day06 超链接的样式与搭配

    1.格式 a:link    {} 普通的.未被访问的链接 a:visited {}  用户已访问的链接 a:hover  {} 鼠标指针位于链接的上方 a:active{} 链接被点击的时刻 2.常 ...

  9. mysql主从数据库

    Mysql主从配置,实现读写分离 大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡,远远不够.到了数据业务层.数据访问层,如果还是传统的数据结构,或者只是单单靠一台服务器扛,如此多的数据库 ...

  10. OpenGL ES2.0入门详解

    引自:http://blog.csdn.net/wangyuchun_799/article/details/7736928  1.决定你要支持的OpenGL ES的版本.目前,OpenGL ES包含 ...