转：饼图向下钻取

最新推荐文章于 2022-07-22 16:18:46 发布

Survivior_Y

最新推荐文章于 2022-07-22 16:18:46 发布

阅读量891

点赞数

文章标签： js

版本声明：官方代码的搬运工

官方举例

源代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></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 Version	Total Market Share
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet 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 Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</pre>
        <script>
            Highcharts.data({
    csv: document.getElementById('tsv').innerHTML,
    itemDelimiter: '\t',
    parsed: function (columns) {
        var brands = {},
            brandsData = [],
            versions = {},
            drilldownSeries = [];
        // 解析百分比字符串
        columns[1] = Highcharts.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];
                // 拆分
                version = name.match(/([0-9]+[\.0-9x]*)/);
                if (version) {
                    version = version[0];
                }
                brand = name.replace(version, '');
                //创建主数据
                if (!brands[brand]) {
                    brands[brand] = columns[1][i];
                } else {
                    brands[brand] += columns[1][i];
                }
                // 创建版本数据
                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 = Highcharts.chart('container',{
            chart: {
                type: 'pie'
            },
            title: {
                text: '2013年11月浏览器市场份额'
            },
            subtitle: {
                text: '单击每个浏览器品牌不同版本的具体信息，数据来源: 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: '品牌',
                colorByPoint: true,
                data: brandsData
            }],
            drilldown: {
                series: drilldownSeries
            }
        });
    }
});
        </script>
    </body>
</html>

注：在自己的项目中引用这些代码的时候，要注意引用的js文件（我就是少引用了一个，bug调试了半天才发现），注意传入数据的格式；

Survivior_Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转：饼图向下钻取

版本声明：官方代码的搬运工官方举例源代码<!DOCTYPE HTML><html> <head> <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ic...
复制链接

扫一扫