آموزش رسم نمودار با Highcharts (جلسه 36) - نمودار سه بعدی - قسمت 3

ساخت وبلاگ

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 36) - نمودار سه بعدی - قسمت 3

<html>

<head>

    <title>Highcharts Tutorial</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

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

</head>

<body>

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

    <script language="JavaScript">

    $(document).ready(function() {

        var chart = {

            type: 'pie',

            options3d: {

                enabled: true,

                alpha: 45,

                beta: 0

            }

        };

        var title = {

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

        };

        var tooltip = {

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

        };

        var plotOptions = {

            pie: {

                allowPointSelect: true,

                cursor: 'pointer',

                depth: 35,

                dataLabels: {

                    enabled: true,

                    format: '{point.name}'

                }

            }

        };

        var series = [{

            type: 'pie',

            name: 'Browser share',

            data: [

                ['Firefox', 45.0],

                ['IE', 26.8], {

                    name: 'Chrome',

                    y: 12.8,

                    sliced: true,

                    selected: true

                },

                ['Safari', 8.5],

                ['Opera', 6.2],

                ['Others', 0.7]

            ]

        }];

        var json = {};

        json.chart = chart;

        json.title = title;

        json.tooltip = tooltip;

        json.plotOptions = plotOptions;

        json.series = series;

        $('#container').highcharts(json);

    });

    </script>

</body>

</html>

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 311 تاريخ : جمعه 28 خرداد 1395 ساعت: 8:19

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه