图表颜色

最新推荐文章于 2021-04-26 14:17:35 发布
转载最新推荐文章于 2021-04-26 14:17:35 发布 · 495 阅读
18 篇文章
订阅专栏
<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script type="text/javascript">

            $(function () {

                $('#container').highcharts({

                    chart: {

                        plotBackgroundColor: null,

                        plotBorderWidth: null,

                        plotShadow: false

                    },

                    colors:[

                        'red',//第一个颜色，欢迎加入Highcharts学习交流群294191384

                        'blue',//第二个颜色

                        'yellow',//第三个颜色

  '#1aadce', //。。。。

                           '#492970',

                           '#f28f43', 

                           '#77a1e5', 

                           '#c42525', 

                           '#a6c96a'

                      ],

                    title: {

                        text: 'Browser market shares at a specific website, 2010'

                    },

                    tooltip: {

     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

                    },

                    plotOptions: {

                        pie: {

                            allowPointSelect: true,

                            cursor: 'pointer',

                            dataLabels: {

                                enabled: true,

                                color: '#000000',

                                connectorColor: '#000000',

                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'

                            }

                        }

                    },

                    series: [{

                        type: 'pie',

                        name: 'Browser share',

                        data: [

                            ['Firefox',   45.0],

                            ['IE',       26.8],

                            ['Opera',     6.2],

                        ]

                    }]

                });

            });

        </script>

    </head>

    <body>

        <script src="http://code.highcharts.com/highcharts.js"></script>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>

</html>