【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

五、在线演示

六、源码下载

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM