highcharts之饼图下钻

来源：互联网发布：psd软件怎么用编辑：程序博客网时间：2024/05/29 18:58
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Highcharts Example</title><jsp:include page="/highchartsjs.jsp"></jsp:include><style type="text/css">${demo.css}</style><script type="text/javascript">$(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);                }                return 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                });            });            // Create the chart            $('#container').highcharts({                chart: {                    type: 'pie'                },                title: {                    text: 'Browser market shares. November, 2013.'                },                subtitle: {                    text: 'Click the slices to view versions. Source: netmarketshare.com.'                },                plotOptions: {                    series: {                        dataLabels: {                            enabled: true,                            format: '{point.name}: {point.y:.1f}%'                        }                    }                },                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/>'                },                 series: [{                    name: 'Brands',                    colorByPoint: true,                    data: brandsData                }],                drilldown: {                    series: drilldownSeries                }            })        }    });});    </script></head><body><div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div><!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. --><pre id="tsv" style="display:none">Browser VersionTotal Market ShareMicrosoft Internet Explorer 8.026.61%Microsoft Internet Explorer 9.016.96%Chrome 18.08.01%Chrome 19.07.73%Firefox 126.72%Microsoft Internet Explorer 6.06.40%Firefox 114.72%Microsoft Internet Explorer 7.03.55%Safari 5.13.53%Firefox 132.16%Firefox 3.61.87%Opera 11.x1.30%Chrome 17.01.13%Firefox 100.90%Safari 5.00.85%Firefox 9.00.65%Firefox 8.00.55%Firefox 4.00.50%Chrome 16.00.45%Firefox 3.00.36%Firefox 3.50.36%Firefox 6.00.32%Firefox 5.00.31%Firefox 7.00.29%Proprietary or Undetectable0.29%Chrome 18.0 - Maxthon Edition0.26%Chrome 14.00.25%Chrome 20.00.24%Chrome 15.00.18%Chrome 12.00.16%Opera 12.x0.15%Safari 4.00.14%Chrome 13.00.13%Safari 4.10.12%Chrome 11.00.10%Firefox 140.10%Firefox 2.00.09%Chrome 10.00.09%Opera 10.x0.09%Microsoft Internet Explorer 8.0 - Tencent Traveler Edition0.09%</pre></body></html>
0 0