Javascript Highchart饼图向下搜索不工作
我的饼图将转到向下展开,但只显示几个连接线。当我返回到原始图表时,只显示一个切片,并且连接器和标签被弄乱了。因为我的数据是从防火墙后面提取出来的,所以我一点也不在乎。我的代码和图表的图片如下。使用淡入方法解决向上钻取视图,而不是向下钻取Javascript Highchart饼图向下搜索不工作,javascript,charts,highcharts,Javascript,Charts,Highcharts,我的饼图将转到向下展开,但只显示几个连接线。当我返回到原始图表时,只显示一个切片,并且连接器和标签被弄乱了。因为我的数据是从防火墙后面提取出来的,所以我一点也不在乎。我的代码和图表的图片如下。使用淡入方法解决向上钻取视图,而不是向下钻取 $(文档).ready(函数(){ $().SPServices({ 操作:“GetListItems”, CAMLQuery:“”, CAMLViewFields:“”, 列表名:“{C6673173-9AC5-4A6B-9401-15D0F38EFCB8}
$(文档).ready(函数(){
$().SPServices({
操作:“GetListItems”,
CAMLQuery:“”,
CAMLViewFields:“”,
列表名:“{C6673173-9AC5-4A6B-9401-15D0F38EFCB8}”,
completefunc:函数(扩展数据、状态){
var spc1Data=[];
var-dev=[];
var ops=[];
//console.log(xData.responseXML);
$(扩展数据.responseXML).SPFilterNode(“z:row”).each(函数(){
var bu=$(this.attr('ows_Business_x0020_Unit');
//ATO数据的YTD请求
如果(bu==“全局连接管理”){
spc1Data.push({
BU:“GCM”
});
}else if(bu==“技术设计与架构”){
spc1Data.push({
BU:“TD&A”
});
}其他条件(bu==“全球客户服务”){
spc1Data.push({
BU:“GCS”
});
}否则{
spc1Data.push({
布:布
});
if(字符串(bu).indexOf('Dev')>-1){
开发推送({
BU:BU.切片(11)
//组织:“
});
}
else if(字符串(bu).indexOf('Ops')>-1){
推({
BU:BU.切片(11)
//组织:“
});
}
}
});
var spcData=[];
对于(变量i=0;i-1){
var bu=字符串(spc1Data[i].bu);
spc1Data[i].BU=BU.slice(0,8);
spcData[i]=spc1Data[i];
}否则{
spcData[i]=spc1Data[i];
}
}
钻井系列=[];
var devTemp=u.groupBy(dev,'BU');
_.每个(devTemp,功能(行){
var buCount=行长度;
推({
id:“技术开发”,
名称:第[0]行。BU,
数据:[行[0]。BU,buCount]
});
});
var chartDataDrillOps=[];
var devOps=u.groupBy(ops,'BU');
_.每个(devOps,功能(行){
var buCount=行长度;
推({
id:“技术行动”,
名称:第[0]行。BU,
数据:[行[0]。BU,buCount]
});
});
var chartData=[];
var buData=u.groupBy(spcData,'BU');
_.每个(buData,功能(行){
var buCount=行长度;
if(第[0]行,BU==“技术开发”){
chartData.push({
名称:第[0]行。BU,
y:buCount,
向下展开:行[0]。BU.toLowerCase()
//向下展开:chartDataDrillDev
//向下展开:第[0]行。BU
});
}else if(第[0]行。BU==“技术操作”){
chartData.push({
名称:第[0]行。BU,
y:buCount,
向下展开:行[0]。BU.toLowerCase()
//向下展开:chartDataDrillOps
//向下展开:第[0]行。BU
});
}否则{
chartData.push({
名称:第[0]行。BU,
y:布坎特
});
}
});
//为三维圆弧创建淡入方法
Highcharts.wrap(Highcharts.svgrender.prototype,'arc3d',函数(继续){
var result=procedue.apply(这个,[].slice.call(参数,1));
result.fadeIn=result.show;
返回结果;
});
var图表=新的Highcharts.图表({
图表:{
键入“pie”,
plotBorderColor:“#0574AC”,
边框宽度:.5,
选项3D:{
启用:对,
阿尔法:55,
贝塔:0
},
renderTo:'局',
plotShadow:false
},
学分:{
已启用:false
},
标题:{
文本:“ATO提出的年初至今请求”
},
工具提示:{
pointFormat:'{point.y}'+'请求'+'
'+'{point.percentage:1.0f}%'
//百分比小数:1
},
打印选项:{
馅饼:{
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
CAMLQuery: "<Query><OrderBy><FieldRef Name='Business_x0020_Unit'/><FieldRef Name='Session_x0020_Status'/></OrderBy></Query>",
CAMLViewFields: "<ViewFields><FieldRef Name='Business_x0020_Unit'/></ViewFields>",
listName: "{C6673173-9AC5-4A6B-9401-15D0F38EFCB8}",
completefunc: function(xData, status) {
var spc1Data = [];
var dev = [];
var ops = [];
//console.log(xData.responseXML);
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var bu = $(this).attr('ows_Business_x0020_Unit');
//YTD Requests by ATO data
if (bu === "Global Connections Management"){
spc1Data.push({
BU: "GCM"
});
}else if(bu === "Technology Design & Architecture"){
spc1Data.push({
BU: "TD&A"
});
}else if(bu === "Global Customer Service"){
spc1Data.push({
BU: "GCS"
});
}else{
spc1Data.push({
BU: bu
});
if (String(bu).indexOf('Dev') > -1) {
dev.push({
BU: bu.slice(11)
//Org: ""
});
}
else if (String(bu).indexOf('Ops') > -1){
ops.push({
BU: bu.slice(11)
//Org: ""
});
}
}
});
var spcData = [];
for (var i = 0; i < spc1Data.length; i++) {
if (String(spc1Data[i].BU).indexOf('-') > -1) {
var bu = String(spc1Data[i].BU);
spc1Data[i].BU = bu.slice(0, 8);
spcData[i] = spc1Data[i];
} else {
spcData[i] = spc1Data[i];
}
}
drilldownSeries = [];
var devTemp = _.groupBy(dev, 'BU');
_.each(devTemp, function(row) {
var buCount = row.length;
drilldownSeries.push({
id: "tech dev",
name: row[0].BU,
data: [row[0].BU, buCount]
});
});
var chartDataDrillOps = [];
var devOps = _.groupBy(ops, 'BU');
_.each(devOps, function(row) {
var buCount = row.length;
drilldownSeries.push({
id: "tech ops",
name: row[0].BU,
data: [row[0].BU, buCount]
});
});
var chartData = [];
var buData = _.groupBy(spcData, 'BU');
_.each(buData, function(row) {
var buCount = row.length;
if (row[0].BU === "Tech Dev"){
chartData.push({
name: row[0].BU,
y: buCount,
drilldown: row[0].BU.toLowerCase()
//drilldown: chartDataDrillDev
// drilldown: row[0].BU
});
}else if(row[0].BU === "Tech Ops"){
chartData.push({
name: row[0].BU,
y: buCount,
drilldown: row[0].BU.toLowerCase()
//drilldown: chartDataDrillOps
// drilldown: row[0].BU
});
}else{
chartData.push({
name: row[0].BU,
y: buCount
});
}
});
// CREATE A FADE-IN METHOD FOR 3D-ARCS
Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'arc3d', function (proceed) {
var result = proceed.apply(this, [].slice.call(arguments, 1));
result.fadeIn = result.show;
return result;
});
var chart = new Highcharts.Chart({
chart: {
type: 'pie',
plotBorderColor: '#0574AC',
borderWidth: .5,
options3d: {
enabled: true,
alpha: 55,
beta: 0
},
renderTo: 'buRequests',
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'YTD Requests by ATO'
},
tooltip: {
pointFormat: '{point.y}' + ' Requests' + '<br>' + '{point.percentage:1.0f}%'
//percentageDecimals: 1
},
plotOptions: {
pie: {
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
softConnector: true,
useHTML: true,
enabled: true,
padding: 0,
fontWeight: 'medium',
//format: '{point.name}'+ '<br>' + '{point.y}' +' Requests' + '<br>' + '{point.percentage:1.0f}%',
formatter: function() {
var req;
if (this.point.y === 1) {
req = " Request";
} else {
req = " Requests";
}
return '<span style="color:' + this.point.color + '">' + this.point.name + '<br>' + this.point.y + req + '<br>' + Math.round(this.percentage) + '%' + '</span>';
}
},
}
},
series: [{
type: 'pie',
name: 'BU Count',
data: chartData,
colors: ['#0472A9', '#F9B112', '#42C5F1', '#EB6E00', '#4AA70A', '#C1D52C']
}],
drilldown:{
series: drilldownSeries
}
});console.log(chart);
}
});
});