آموزش رسم نمودار با Highcharts (جلسه 31) - نمودار ترکیبی - قسمت 1

ساخت وبلاگ

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 31) - نمودار ترکیبی - قسمت 1

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

</head>

<body>

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

    <script language="JavaScript">

    $(document).ready(function() {

        var title = {

            text: 'Combination chart'

        };

        var xAxis = {

            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']

        };

        var labels = {

            items: [{

                html: 'Total fruit consumption',

                style: {

                    left: '50px',

                    top: '18px',

                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'

                }

            }]

        };

        var series = [{

            type: 'column',

            name: 'Jane',

            data: [3, 2, 1, 3, 4]

        }, {

            type: 'column',

            name: 'John',

            data: [2, 3, 5, 7, 6]

        }, {

            type: 'column',

            name: 'Joe',

            data: [4, 3, 3, 9, 0]

        }, {

            type: 'spline',

            name: 'Average',

            data: [3, 2.67, 3, 6.33, 3.33],

            marker: {

                lineWidth: 2,

                lineColor: Highcharts.getOptions().colors[3],

                fillColor: 'white'

            }

        }, {

            type: 'pie',

            name: 'Total consumption',

            data: [{

                name: 'Jane',

                y: 13,

                color: Highcharts.getOptions().colors[0] // Jane's color

            }, {

                name: 'John',

                y: 23,

                color: Highcharts.getOptions().colors[1] // John's color

            }, {

                name: 'Joe',

                y: 19,

                color: Highcharts.getOptions().colors[2] // Joe's color

            }],

            center: [100, 80],

            size: 100,

            showInLegend: false,

            dataLabels: {

                enabled: false

            }

        }];

        var json = {};

        json.title = title;

        json.xAxis = xAxis;

        json.labels = labels;

        json.series = series;

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

    });

    </script>

</body>

</html>

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

برچسب : نویسنده : استخدام کار 7learn بازدید : 331 تاريخ : يکشنبه 23 خرداد 1395 ساعت: 23:09

آرشیو مطالب

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

لینک دوستان

خبرنامه