Highcharts甜甜圈百分比问题

时间:2016-08-11 07:00:32

标签: javascript jquery highcharts donut-chart

我正在尝试使用Highcharts进行可视化。我想改变外面的甜甜圈的价值观。值应以百分比表示。例如,如果y值为23,则数据值为11和12,但我想将它们显示为y(11 * 100/23)的百分比......是否可能?

代码

$(function () {
    var a = [];

    var colors = Highcharts.getOptions().colors,
        categories = ['pool_ipv4_02','pool_ipv4_03','pool_ipv6_02','pool_ipv6_03','pool_ipv4_01','pool_ipv6_01'],
        data = [{
            y: 13.45,
            color: colors[0],
            drilldown: {
                name: 'Pool1 Info',
                categories: ['Used', 'Free'],
                data: [12.73,0.72],
                color: colors[0]
            }
        }, {
            y: 20.38,
            color: colors[1],
            drilldown: {
                name: 'Pool2 Info',
                categories: ['Used', 'Free'],
                data: [14.03,6.35],
                color: colors[1]
            }
        }, {
            y: 24.03,
            color: colors[2],
            drilldown: {
                name: 'Pool3 Info',
                categories: ['Used', 'Free'],
                data: [12.73,11.3],
                color: colors[2]
            }
        }, {
            y: 11.77,
            color: colors[3],
            drilldown: {
                name: 'Pool4 Info',
                categories: ['Used', 'Free'],
                data: [7.43,4.34],
                color: colors[3]
            }

        },{
            y: 19.33,
            color: colors[4],
            drilldown: {
                name: 'Pool5 Info',
                categories: ['Used', 'Free'],
                data: [4.73,14.6],
                color: colors[4]
            }
        },{
            y: 11.04,
            color: colors[5],
            drilldown: {
                name: 'Pool6 Info',
                categories: ['Used', 'Free'],
                data: [4.73,6.31],
                color: colors[5]
            }
        }],

        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;
        a[0] = data[0].drilldown.data[0]*100/(data[0].drilldown.data[0]+data[0].drilldown.data[1]);
        a[1] = data[0].drilldown.data[1]*100/(data[0].drilldown.data[0]+data[0].drilldown.data[1]);
        console.log(a[0]);
        console.log(a[1]);

    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {
        console.log(data[i]);
        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });
        console.log(data[i].drilldown.data[0]);
        console.log(data[i].drilldown.data[1]);
        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            brightness = 0.2 - (j / drillDataLen) / 5;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // Create the chart
    $('#container2').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'BNG3 Pool Information'
        },

        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Pool',
            data: browserData,
            size: '60%',
            dataLabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: '#ffffff',
                distance: -30
            }
        }, {
            name: 'Utilization',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                formatter: function () {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                }
            }
        }]
    });
});

0 个答案:

没有答案