图表颜色

来源:互联网 发布:谢谢网络 编辑:程序博客网 时间:2024/04/30 20:55
<!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>
0 0