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

来源：互联网发布：php做商城程序流程图编辑：程序博客网时间：2024/06/08 01:15

话不多说先上官方手册

需要加载的几个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: '<span style="font-size:11px">{series.name}</span><br>',                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> <br/>'                },                series: [{                    name: '销售',                    colorByPoint: true,                    data: brandsData                }],                drilldown: {                    series: drilldownSeries                }            });        }    });});

html代码

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div><!-- 下面的DIV 是参数 --><pre id="tsv" style="display:none">Browser VersionTotal Market Share产品名 【温】5.00%产品名 【冰】15.00%产品名 【热】 20.00%产品名一号 【冰】18.00%产品名一号 【热】 12.00%产品名二号 【温】3.00%产品名二号 【冰】27.00%</pre>

0 0