• 【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

    五、在线演示

    六、源码下载

  • 相关阅读:
    数据分析 第五篇:离群点检测
    linux lsof命令详解
    ES基本查询语句教程
    Swagger详解(SpringBoot+Swagger集成)
    Elasticsearch5.0 安装问题集锦
    kafka auto.offset.reset latest earliest 详解
    干货 | Elasticsearch多表关联设计指南
    kafka auto.offset.reset latest earliest 详解
    linux sed命令
    Idea中如何使用debug操作
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/4253324.html
Copyright © 2020-2023  润新知