我正在尝试在SAPUI5中集成D3图表。 我几乎完成了，并在运行应用程序时 我能够看到自定义图表，它正在消失。 请有人帮我解决这个问题。
jQuery.sap.require("sap/ui/thirdparty/d3");
jQuery.sap.declare("sap.jaysdkCustomD3Chartings.RadarChart");
sap.ui.core.Control.extend("sap.jaysdkCustomD3Chartings.RadarChart", {
metadata: {
properties: {
"axis": {
type: "string",
group: "Misc",
defaultValue: null
},
"value": {
type: "string",
group: "Misc",
defaultValue: null
}
}
},
init: function() {
console.log("sap.jaysdkCustomD3Chartings..RadarChart.init()");
this.sParentId = "";
},
createRadars: function() {
/*
* Called from renderer
*/
debugger;
console.log("sap.jaysdkCustomD3Chartings.HeatMap.createHeatMap()");
// var oRadarLayout = new sap.m.VBox({alignItems:sap.m.FlexAlignItems.Center,justifyContent:sap.m.FlexJustifyContent.Center});
//var ccRadarHolder = new sap.m.FlexBox("radarHolder", {"alignItems": "Start", "justifyContent": "Center"});
var ccRadarHolder = new sap.m.VBox("radarHolder", {
"alignItems": "Start",
"justifyContent": "Center"
});
/* ATTENTION: Important
* This is where the magic happens: we need a handle for our SVG to attach to. We can get this using .getIdForLabel()
* Check this in the 'Elements' section of the Chrome Devtools:
* By creating the layout and the Flexbox, we create elements specific for this control, and SAPUI5 takes care of
* ID naming. With this ID, we can append an SVG tag inside the FlexBox
*/
this.sParentId = ccRadarHolder.getIdForLabel();
// oHeatMapLayout.addItem(oHeatMapFlexBox);
return ccRadarHolder;
},
/**
* The renderer render calls all the functions which are necessary to create the control,
* then it call the renderer of the vertical layout
* @param oRm {RenderManager}
* @param oControl {Control}
*/
renderer: function(oRm, oControl) {
var layout = oControl.createRadars();
oRm.write("<div");
oRm.writeControlData(layout); // writes the Control ID and enables event handling – important!
oRm.writeClasses(); // there is no class to write, but this enables
// support for ColorBoxContainer.addStyleClass(…)
oRm.write(">");
oRm.renderControl(layout);
oRm.addClass('verticalAlignment');
oRm.write("</div>");
},
onAfterRendering: function() {
var d = [];
d = this.getModel().oData;
var cfg = {
radius: 5,
w: 600,
h: 600,
factor: 1,
factorLegend: .85,
levels: 3,
maxValue: 0,
radians: 2 * Math.PI,
opacityArea: 0.5,
ToRight: 5,
TranslateX: 80,
TranslateY: 30,
ExtraWidthX: 100,
ExtraWidthY: 100,
color: d3.scale.category10()
};
var w = 500,
h = 500;
var options = {
w: w,
h: h,
maxValue: 0.6,
levels: 6,
ExtraWidthX: 300
};
var vis = d3.select("#" + this.sParentId);
if ('undefined' !== typeof options) {
for (var i in options) {
if ('undefined' !== typeof options[i]) {
cfg[i] = options[i];
}
}
}
cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i) {
return d3.max(i.map(function(o) {
return o.value;
}))
}));
var allAxis = (d[0].map(function(i, j) {
return i.axis
}));
var total = allAxis.length;
var radius = cfg.factor * Math.min(cfg.w / 2, cfg.h / 2);
var Format = d3.format('%');
//d3.svg.remove();//d3.select(vis).select("svg").remove();
var g = //d3.select(vis)
vis
.append("svg")
.attr("width", cfg.w + cfg.ExtraWidthX)
.attr("height", cfg.h + cfg.ExtraWidthY)
.append("g")
.attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")");
var tooltip;
//Circular segments
for (var j = 0; j < cfg.levels - 1; j++) {
var levelFactor = cfg.factor * radius * ((j + 1) / cfg.levels);
g.selectAll(".levels")
.data(allAxis)
.enter()
.append("svg:line")
.attr("x1", function(d, i) {
return levelFactor * (1 - cfg.factor * Math.sin(i * cfg.radians / total));
})
.attr("y1", function(d, i) {
return levelFactor * (1 - cfg.factor * Math.cos(i * cfg.radians / total));
})
.attr("x2", function(d, i) {
return levelFactor * (1 - cfg.factor * Math.sin((i + 1) * cfg.radians / total));
})
.attr("y2", function(d, i) {
return levelFactor * (1 - cfg.factor * Math.cos((i + 1) * cfg.radians / total));
})
.attr("class", "line")
.style("stroke", "grey")
.style("stroke-opacity", "0.75")
.style("stroke-width", "0.3px")
.attr("transform", "translate(" + (cfg.w / 2 - levelFactor) + ", " + (cfg.h / 2 - levelFactor) + ")");
}
//Text indicating at what % each level is
for (var j = 0; j < cfg.levels; j++) {
var levelFactor = cfg.factor * radius * ((j + 1) / cfg.levels);
g.selectAll(".levels")
.data([1]) //dummy data
.enter()
.append("svg:text")
.attr("x", function(d) {
return levelFactor * (1 - cfg.factor * Math.sin(0));
})
.attr("y", function(d) {
return levelFactor * (1 - cfg.factor * Math.cos(0));
})
.attr("class", "legend")
.style("font-family", "sans-serif")
.style("font-size", "10px")
.attr("transform", "translate(" + (cfg.w / 2 - levelFactor + cfg.ToRight) + ", " + (cfg.h / 2 - levelFactor) + ")")
.attr("fill", "#737373")
.text(Format((j + 1) * cfg.maxValue / cfg.levels));
}
series = 0;
var axis = g.selectAll(".axis")
.data(allAxis)
.enter()
.append("g")
.attr("class", "axis");
axis.append("line")
.attr("x1", cfg.w / 2)
.attr("y1", cfg.h / 2)
.attr("x2", function(d, i) {
return cfg.w / 2 * (1 - cfg.factor * Math.sin(i * cfg.radians / total));
})
.attr("y2", function(d, i) {
return cfg.h / 2 * (1 - cfg.factor * Math.cos(i * cfg.radians / total));
})
.attr("class", "line")
.style("stroke", "grey")
.style("stroke-width", "1px");
axis.append("text")
.attr("class", "legend")
.text(function(d) {
return d
})
.style("font-family", "sans-serif")
.style("font-size", "11px")
.attr("text-anchor", "middle")
.attr("dy", "1.5em")
.attr("transform", function(d, i) {
return "translate(0, -10)"
})
.attr("x", function(d, i) {
return cfg.w / 2 * (1 - cfg.factorLegend * Math.sin(i * cfg.radians / total)) - 60 * Math.sin(i * cfg.radians / total);
})
.attr("y", function(d, i) {
return cfg.h / 2 * (1 - Math.cos(i * cfg.radians / total)) - 20 * Math.cos(i * cfg.radians / total);
});
d.forEach(function(y, x) {
dataValues = [];
g.selectAll(".nodes")
.data(y, function(j, i) {
dataValues.push([
cfg.w / 2 * (1 - (parseFloat(Math.max(j.value, 0)) / cfg.maxValue) * cfg.factor * Math.sin(i * cfg.radians / total)),
cfg.h / 2 * (1 - (parseFloat(Math.max(j.value, 0)) / cfg.maxValue) * cfg.factor * Math.cos(i * cfg.radians / total))
]);
});
dataValues.push(dataValues[0]);
g.selectAll(".area")
.data([dataValues])
.enter()
.append("polygon")
.attr("class", "radar-chart-serie" + series)
.style("stroke-width", "2px")
.style("stroke", cfg.color(series))
.attr("points", function(d) {
var str = "";
for (var pti = 0; pti < d.length; pti++) {
str = str + d[pti][0] + "," + d[pti][1] + " ";
}
return str;
})
.style("fill", function(j, i) {
return cfg.color(series)
})
.style("fill-opacity", cfg.opacityArea)
.on('mouseover', function(d) {
z = "polygon." + d3.select(this).attr("class");
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", 0.1);
g.selectAll(z)
.transition(200)
.style("fill-opacity", .7);
})
.on('mouseout', function() {
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", cfg.opacityArea);
});
series++;
});
series = 0;
d.forEach(function(y, x) {
g.selectAll(".nodes")
.data(y).enter()
.append("svg:circle")
.attr("class", "radar-chart-serie" + series)
.attr('r', cfg.radius)
.attr("alt", function(j) {
return Math.max(j.value, 0)
})
.attr("cx", function(j, i) {
dataValues.push([
cfg.w / 2 * (1 - (parseFloat(Math.max(j.value, 0)) / cfg.maxValue) * cfg.factor * Math.sin(i * cfg.radians / total)),
cfg.h / 2 * (1 - (parseFloat(Math.max(j.value, 0)) / cfg.maxValue) * cfg.factor * Math.cos(i * cfg.radians / total))
]);
return cfg.w / 2 * (1 - (Math.max(j.value, 0) / cfg.maxValue) * cfg.factor * Math.sin(i * cfg.radians / total));
})
.attr("cy", function(j, i) {
return cfg.h / 2 * (1 - (Math.max(j.value, 0) / cfg.maxValue) * cfg.factor * Math.cos(i * cfg.radians / total));
})
.attr("data-id", function(j) {
return j.axis;
})
.style("fill", cfg.color(series)).style("fill-opacity", .9)
.on('mouseover', function(d) {
var newX = parseFloat(d3.select(this).attr('cx')) - 10;
var newY = parseFloat(d3.select(this).attr('cy')) - 5;
tooltip
.attr('x', newX)
.attr('y', newY)
.text(Format(d.value))
.transition(200)
.style('opacity', 1);
z = "polygon." + d3.select(this).attr("class");
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", 0.1);
g.selectAll(z)
.transition(200)
.style("fill-opacity", .7);
})
.on('mouseout', function() {
tooltip
.transition(200)
.style('opacity', 0);
g.selectAll("polygon")
.transition(200)
.style("fill-opacity", cfg.opacityArea);
})
.append("svg:title")
.text(function(j) {
return Math.max(j.value, 0)
});
series++;
});
//Tooltip
tooltip = g.append('text')
.style('opacity', 0)
.style('font-family', 'sans-serif')
.style('font-size', '13px');
}
});
此致 协噶尔。