一、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: