1
У меня есть графический рисунок с динамическими значениями. Поэтому, если в моем наборе данных есть 2 строки, тогда в piechart будет только два фрагмента, если в наборе данных есть 3 строки, тогда 3 среза получат сюжет и т. Д. Мой вопрос заключается в том, как покрыть весь piechart выбранным цветом среза без использования детализации. 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;
}
});
Я не получаю _covered на все PieChart с выбранными средствами среза color_. Пожалуйста, предоставьте более подробную информацию. Я думаю, вы хотите что-то вроде [Синхронизированные диаграммы] (http://www.highcharts.com/demo/synchronized-charts) –
Я хочу что-то вроде прикрепленного изображения, но без использования drilldown js.https: //i.stack. imgur.com/Jczp4.png. Цвет должен быть соответствующим цветом среза. в настоящее время на изображении с правой стороны, покрывающий пихарт синим цветом. предположим, если я нажму на желтый, он должен быть покрыт желтым цветом и т. д. ,, –