我正在尝试使用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;
}
}
}]
});
});