【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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值