首页 > 代码库 > 【HighCharts系列教程】四、颜色属性——colors
【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