一、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. 第4章 流程控制----编写Java程序，应用for循环打印菱形

    package four; public class fouroneone { public static void main(String args[]){ ;i<=;i+=){ ;kong& ...

  2. IE11中的F12无效的问题

    最近做的一个项目中,h5中的video标签IE11在有的机器上兼容,有的机器上不兼容,很是让人头疼.将IE卸载后重装又发现最新的IE11中F12开发者工具失效.面对F12失效的问题,具体解决办法如下: ...

  3. Ansible1：简介与基本安装【转】

    Ansible是一个综合的强大的管理工具,他可以对多台主机安装操作系统,并为这些主机安装不同的应用程序,也可以通知指挥这些主机完成不同的任务.查看多台主机的各种信息的状态等,ansible都可以通过模 ...

  4. 【实验室笔记】太阳能板清洁器DEMO

    <太阳能板清洁器DEMO>2015年的毕昇杯比赛作品,用时两天,整体设计思路很简单: [机械结构]: 清洁器主体采用角钢搭建,用钢锯切割好以后,上螺丝,走线用的尼龙扎带捆绑: 清洗滚轮采用 ...

  5. 安卓四大组件的作用、安卓Service的作用

    Activity好像是应用程式的眼睛,提供与user互动之窗. BroadcastReceiver好像是耳朵,接收来自各方的Intent. Service是在后台运行的. 一个Service 是一段长 ...

  6. 近十年one-to-one最短路算法研究整理【转】

    前言:针对单源最短路算法,目前最经典的思路即标号算法,以Dijkstra算法和Bellman-Ford算法为根本演进了各种优化技术和算法.针对复杂网络,传统的优化思路是在数据结构和双向搜索上做文章,或 ...

  7. centos 6.2安装bind 9.8.2 master、slave与自动修改后更新

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://dl528888.blog.51cto.com/2382721/1249311 随 ...

  8. nuget 服务器崩溃

    1,首先是500错误 2.服务器处理请求时遇到错误.异常消息为"对路径" bin"目录的访问被拒绝." 对bin目录添加User用户读写权限

  9. c printf()详解[转载]

    ref : http://www.cnblogs.com/yuaqua/archive/2011/10/21/2219856.html #include <cstdio> #include ...

  10. 常见html标签

    1.flash嵌入标签 <object> <embed allowscriptaccess="always" allowfullscreen="true ...