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

ساخت وبلاگ

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 25) - نمودارهای دایره ای - قسمت 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/modules/drilldown.js"></script>

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

</head>

<body>

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

    <script language="JavaScript">

    $(document).ready(function() {

        Highcharts.data({

            csv: document.getElementById('tsv').innerHTML,

            itemDelimiter: 't',

            parsed: function(columns) {

                var brands = {},

                    brandsData = [],

                    versions = {},

                    drilldownSeries = [];

                // Parse percentage strings

                columns[1] = $.map(columns[1], function(value) {

                    if (value.indexOf('%') === value.length - 1) {

                        value = parseFloat(value);

                    }

                    retu value;

                });

                $.each(columns[0], function(i, name) {

                    var brand, version;

                    if (i > 0) {

                        // Remove special edition notes

                        name = name.split(' -')[0];

                        // Split into brand and version

                        version = name.match(/([0-9]+[.0-9x]*)/);

                        if (version) {

                            version = version[0];

                        }

                        brand = name.replace(version, '');

                        // Create the main data

                        if (!brands[brand]) {

                            brands[brand] = columns[1][i];

                        } else {

                            brands[brand] += columns[1][i];

                        }

                        // Create the version data

                        if (version !== null) {

                            if (!versions[brand]) {

                                versions[brand] = [];

                            }

                            versions[brand].push(['v' + version, columns[1][i]]);

                        }

                    }

                });

                $.each(brands, function(name, y) {

                    brandsData.push({

                        name: name,

                        y: y,

                        drilldown: versions[name] ? name : null

                    });

                });

                $.each(versions, function(key, value) {

                    drilldownSeries.push({

                        name: key,

                        id: key,

                        data: value

                    });

                });

                var chart = {

                    type: 'pie'

                };

                var title = {

                    text: 'Browser market shares. November, 2013'

                };

                var subtitle = {

                    text: 'Click the slices to view versions. Source: netmarketshare.com.'

                };

                var xAxis = {

                    type: 'category'

                };

                var yAxis = {

                    title: {

                        text: 'Total percent market share'

                    }

                };

                var tooltip = {

                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',

                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'

                };

                var credits = {

                    enabled: false

                };

                var series = [{

                    name: 'Brands',

                    colorByPoint: true,

                    data: brandsData

                }];

                var drilldown = {

                    series: drilldownSeries

                }

                var json = {};

                json.chart = chart;

                json.title = title;

                json.subtitle = subtitle;

                json.xAxis = xAxis;

                json.yAxis = yAxis;

                json.tooltip = tooltip;

                json.credits = credits;

                json.series = series;

                json.drilldown = drilldown;

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

            }

        });

    });

    </script>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->

<pre id="tsv" style="display:none">

Browser Version Total Market Share

Microsoft Inteet Explorer 8.0 26.61%

Microsoft Inteet Explorer 9.0 16.96%

Chrome 18.0 8.01%

Chrome 19.0 7.73%

Firefox 12  6.72%

Microsoft Inteet Explorer 6.0 6.40%

Firefox 11  4.72%

Microsoft Inteet Explorer 7.0 3.55%

Safari 5.1  3.53%

Firefox 13  2.16%

Firefox 3.6 1.87%

Opera 11.x  1.30%

Chrome 17.0 1.13%

Firefox 10  0.90%

Safari 5.0  0.85%

Firefox 9.0 0.65%

Firefox 8.0 0.55%

Firefox 4.0 0.50%

Chrome 16.0 0.45%

Firefox 3.0 0.36%

Firefox 3.5 0.36%

Firefox 6.0 0.32%

Firefox 5.0 0.31%

Firefox 7.0 0.29%

Proprietary or Undetectable 0.29%

Chrome 18.0 - Maxthon Edition 0.26%

Chrome 14.0 0.25%

Chrome 20.0 0.24%

Chrome 15.0 0.18%

Chrome 12.0 0.16%

Opera 12.x  0.15%

Safari 4.0  0.14%

Chrome 13.0 0.13%

Safari 4.1  0.12%

Chrome 11.0 0.10%

Firefox 14  0.10%

Firefox 2.0 0.09%

Chrome 10.0 0.09%

Opera 10.x  0.09%

Microsoft Inteet Explorer 8.0 - Tencent Traveler Edition  0.09%

</pre>

</body>

</html>

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

برچسب : نویسنده : استخدام کار 7learn بازدید : 239 تاريخ : دوشنبه 17 خرداد 1395 ساعت: 11:48

آرشیو مطالب

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

لینک دوستان

خبرنامه