<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Highcharts 下钻柱形图 - 菜鸟教程</title>

    <!-- Highcharts 主库 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>

    <!-- 下钻模块 -->
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
</head>
<body>

<div id="container"
     style="width:100%;max-width:850px;height:450px;margin:0 auto;">
</div>

<script>
// 历史浏览器市场份额示例数据
// 格式：浏览器名称  市场份额

const rawData = `
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%
`;

// 浏览器分类
const browserNames = [
    'Microsoft Internet Explorer',
    'Chrome',
    'Firefox',
    'Safari',
    'Opera'
];

const brands = {};
const versions = {};

// 解析原始数据
rawData.trim().split('\n').forEach(line => {

    // 提取名称与末尾的百分比
    const match = line.trim().match(
        /^(.+?)\s+(\d+(?:\.\d+)?)%$/
    );

    if (!match) {
        return;
    }

    const fullName = match[1];
    const share = parseFloat(match[2]);

    // 查找浏览器品牌
    const brand = browserNames.find(name =>
        fullName.startsWith(name + ' ')
    ) || '其他';

    // 提取版本信息，保留特殊版本名称
    let versionName = fullName;

    if (brand !== '其他') {
        versionName = fullName
            .slice(brand.length)
            .trim();
    }

    // 累加品牌份额
    if (!brands[brand]) {
        brands[brand] = 0;
        versions[brand] = [];
    }

    brands[brand] += share;

    // 保存版本明细
    versions[brand].push([
        versionName,
        share
    ]);
});

// 转换为 Highcharts 主数据
const brandsData = Object.keys(brands).map(brand => ({
    name: brand,
    y: Number(brands[brand].toFixed(2)),
    drilldown: brand
}));

// 按份额从高到低排列
brandsData.sort((a, b) => b.y - a.y);

// 生成下钻数据系列
const drilldownSeries = Object.keys(versions).map(brand => ({
    id: brand,
    name: brand + ' 版本',
    type: 'column',
    data: versions[brand].sort((a, b) => b[1] - a[1])
}));

// 创建图表
Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: '浏览器市场份额（历史示例数据）'
    },

    subtitle: {
        text: '点击柱形查看各浏览器版本的份额'
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: '市场份额 (%)'
        },
        min: 0
    },

    legend: {
        enabled: false
    },

    tooltip: {
        headerFormat: '',
        pointFormat:
            '<b>{point.name}</b><br>' +
            '市场份额：{point.y:.2f}%'
    },

    plotOptions: {
        column: {
            borderRadius: 3
        }
    },

    series: [{
        name: '浏览器品牌',
        colorByPoint: true,
        data: brandsData
    }],

    drilldown: {
        breadcrumbs: {
            position: {
                align: 'right'
            }
        },
        series: drilldownSeries
    },

    credits: {
        enabled: false
    }

});
</script>

</body>
</html>