Highcharts饼图下钻式基本操作方法

话不多说先上官方手册

需要加载的几个JS 插件就不废话了 自己看官方事例 代码 官方demo

上我编译后的中文数据

javascript 代码

$(function () {
    Highcharts.data({
        //获取CSV内的参数
        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
                    //alert(name);
                    name = name.split(' -')[0];
                    //匹配下钻数据
                    version = name.match(/【(.*?)】/);
                    //alert(version);
                    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(['规格' + 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: '表头.'
                },
                subtitle: {
                    text: '副标题'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: {point.y:.1f}%'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '{series.name}
',
                    pointFormat: '{point.name}: {point.y:.2f}% 
'
                },
                series: [{
                    name: '销售',
                    colorByPoint: true,
                    data: brandsData
                }],
                drilldown: {
                    series: drilldownSeries
                }
            });
        }
    });
});

html代码

Browser Version	Total Market Share
产品名 【温】	5.00%
产品名 【冰】	15.00%
产品名 【热】 	20.00%
产品名一号 【冰】	18.00%
产品名一号 【热】	 12.00%
产品名二号 【温】	3.00%
产品名二号 【冰】	27.00%