【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、当数据列大于默认颜色数量时，重复从第一个

颜色看是调用

 

 

 

三、实例说明

 

<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_2_2_colors.jpg

五、在线演示

演示地址：http://www.52wulian.org/test/HighCharts/highcharts_2_2_color.html

六、源码下载

下载地址：http://pan.baidu.com/share/link?shareid=208224&uk=3087605183

 

posted @ 2015-01-27 16:32  岁月淡忘了谁  阅读(7916)  评论(0)  编辑  收藏  举报