【HighCharts系列教程】四、颜色属性——colors

一、Colors属性说明

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

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

二、colors属性详解

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

参数	默认值	说明
一组颜色代码，如 colors:[\'#4572A7\',\'#89A54E\',...]	colors:[ \'#4572A7\', \'#AA4643\', \'#89A54E\', \'#80699B\', \'#3D96AE\', \'#DB843D\', \'#92A8CD\', \'#A47D7C\', \'#B5CA92\' ]	1、颜色代码可以是十六进制，也可以是英文单词，还可以是RGB，如同css 2、默认是从第一个数据列起调用第一个颜色代码，有多少个数据列调用相应数量的颜色 3、当数据列大于默认颜色数量时，重复从第一个颜色看是调用

参数

默认值

说明

一组颜色代码，如

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: