我有一个用动态值绘制的饼图。因此，如果我的数据集包含 2 行，则饼图中将只有两个切片，如果数据集包含 3 行，则饼图中将显示 3 个切片，依此类推。我的问题是如何在不使用向下钻取的情况下使用所选切片颜色覆盖所有饼图。 js
这是代码
init: $(function () {
Highcharts.setOptions({
colors: ['#3f51b5', '#03a9f4', '#0caf50', '#f9ce1d', '#ff9800', '#007bc1'],
});
$(document).ready(function () {
if ($("#GridContainer").find(':only-child:last').html() == "No Data Found") {
$("#InvestorListFilter").hide()
}
else
{
$("#InvestorListFilter").show()
}
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
plotBorderWidth: 0,
plotShadow: false,
marginRight: '-25',
backgroundColor:'#f7f7f7',
events: {
load: function () {
requestDataforGeoDispersion(1);
},
}
},
title: {
text: 'Geographical Dispersion',
verticalAlign: 'bottom',
align: 'center',
y: -5,
x:15,
style: {
color: '#00539b',
fontWeight: 'bold',
fontfamily: 'Frutiger Light',
padding:0
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
//align: 'center',
//y: 11,
//x:19,
style: {
color: '#007bc1',
fontWeight: 'bold'
},
},
tooltip: {
valueDecimals: 2,
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td><td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr><tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
innerSize: 50,
borderWidth :0,
depth: 45,
slicedOffset: 0,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
style: {
padding:0
},
dataLabels: {
color: '#999999',
distance: 10,
connectorWidth: 0,
allowOverlap: true,
enabled: true,
padding: 0,
connectorPadding: 0,
style: {
fontWeight: 'normal',
fontSize: '10px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'pie',
plotBorderWidth: 0,
backgroundColor: '#f7f7f7',
plotShadow: false,
marginRight: '-30',
events: {
load: requestDataforGeoDispersion(2)
}
},
title: {
text: 'Investment Style',
verticalAlign: 'bottom',
y: -5,
x: 15,
style: {
color: '#00539b',
fontWeight: 'bold'
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
align: 'center',
y: 11,
x:19,
style: {
color: '#007bc1',
fontWeight: 'bold'
}
},
tooltip: {
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td><td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr><tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
innerSize: 50,
depth: 45,
borderWidth :0,
slicedOffset: 0,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
dataLabels: {
color: '#999999',
distance: 10,
enabled: true,
allowOverlap: true,
connectorWidth: 0,
padding: 0,
connectorPadding: 0,
style: {
fontWeight: 'normal',
fontSize: '10px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{
}]
});
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'pie',
plotBorderWidth: 0,
plotShadow: false,
marginRight: '-30',
backgroundColor: '#f7f7f7',
borderColor: '#FFFFFF',
events: {
load: requestDataforGeoDispersion(3)
}
},
title: {
text: 'Investor Type',
verticalAlign: 'bottom',
fontfamily:'Frutiger Light',
y: -5,
x:15,
style: {
color: '#00539b',
fontWeight: 'bold'
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
align: 'center',
y: 11,
x:19,
style: {
color: '#007bc1',
fontWeight: 'bold',
title: 'Manish'
}
},
tooltip: {
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td>'+
'<td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr>'+
'<tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
innerSize: 50,
slicedOffset: 0,
borderWidth :0,
depth: 45,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
dataLabels: {
color: '#999999',
distance: 10,
connectorWidth: 0,
connectorPadding: 0,
allowOverlap: true,
padding: 0,
enabled:true,
style: {
fontWeight: 'normal',
fontSize: '10px',
//width:'100px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{}]
});
var chartData = "";
init: function requestDataforGeoDispersion(flag) {
var multiselectRegion = $("input[id*=HdnRegionMultiple]").val();
var multiselectStyle = $("input[id*=hdnInvestmentStyle]").val();
var multiselectType = $("input[id*=HdnInvestorType]").val();
var activityChart = $('input[name=m$p1$RadioButtonListTrends]:checked').val();
$.ajax({
url: "Investors.aspx/GetPieChartDataForGeoDispersion",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{regionID: "' + multiselectRegion + '",styleID: "' + multiselectStyle + '",typeID: "' + multiselectType + '",activityChartValue: "' + activityChart + '" }',
success: function (data) {
chartData = JSON.parse(data.d);
var color="";
var dataArr = [];
if (flag == 1) {
$.each(chartData[0], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.RegionName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorCompanyRegionID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArr.push(jsondata);
}
});
chart1.addSeries({
name: 'GeoDispersion',
colorByPoint: true,
size: 140,
allowOverlap: true,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=HdnRegionMultiple]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
data: dataArr,
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart1.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart1.renderTo.appendChild(menu);
chart1.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart1.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
else if (flag == 2)
{
var dataArrStyle = [];
drilldownSeries = [];
$.each(chartData[1], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.StyleName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorStyleID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArrStyle.push(jsondata);
}
});
chart2.addSeries({
name: 'InvestmentStyle',
colorByPoint: true,
enabled: true,
allowOverlap: true,
size: 140,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=hdnInvestmentStyle]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
data: dataArrStyle,
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart2.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart2.renderTo.appendChild(menu);
chart2.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart2.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
else if (flag == 3)
{
var dataArrType = [];
$.each(chartData[2], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.TypeName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorTypeID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArrType.push(jsondata);
}
});
chart3.addSeries({
name: 'InvestorTypes',
colorByPoint: true,
size: 140,
data: dataArrType,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=HdnInvestorType]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart3.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart3.renderTo.appendChild(menu);
chart3.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart3.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
},
cache: false
});
}
});
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
});最佳答案
您可以在点的单击事件上更新点的颜色 - 请参阅 API .
在单击事件时，循环遍历点并更新其颜色，当循环结束时，重新绘制图表。
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function () {
this.series[0].points.forEach(point => {
point.options.baseColor = point.color;
});
}
}
},
series: [{
name: 'Brands',
data: [
{ name: 'Microsoft Internet Explorer', y: 56.33 },
{ name: 'Chrome', y: 24.03 },
{ name: 'Firefox', y: 10.38 },
{ name: 'Safari', y: 4.77 },
{ name: 'Opera', y: 0.91 },
{ name: 'Proprietary or Undetectable', y: 0.2 }
],
innerSize: '40%',
size: '80%',
point: {
events: {
click: function () {
this.series.points.forEach(point => {
point.update({
color: this.options.baseColor,
dataLabels: {
enabled: point === this
}
}, false);
});
this.series.chart.redraw();
}
}
}
}]
});
关于javascript - 如何用选定的部分覆盖整个饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42407627/