在Yii应用程序上实现getorgchart.js时遇到问题。错误读取。 Image Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window':
<script type="text/javascript">
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
var hex2rgb = function (hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
};
var rgb2hex = function (rgb) {
return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
};
var interpolateColor = function (color1, color2, factor) {
if (arguments.length < 3) { factor = 0.5; }
var result = color1.slice();
for (var i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
}
return result;
};
var source = [
{ id: 1, parentId: null, name: "Amber McKenzie", salary: "$10000", image: "images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", salary: "$5000", image: "images/f-10.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", salary: "$8000", image: "images/f-9.jpg" },
{ id: 4, parentId: 1, name: "Paul Shetler", salary: "$9000", image: "images/f-5.jpg" },
{ id: 5, parentId: 2, name: "Rebecca Francis", salary: "$3000", image: "images/f-1.jpg" },
{ id: 6, parentId: 2, name: "Riley Bray", salary: "$4000", image: "images/f-2.jpg" },
{ id: 7, parentId: 4, name: "Max Ford", salary: "$6000", image: "images/f-4.jpg" },
{ id: 8, parentId: 4, name: "Callum Whitehouse", salary: "$7000", image: "images/f-3.jpg" }
];
var start = hex2rgb("#008000");
var end = hex2rgb("#cc3300");
var max = null;
var min = null;
var factor = null;
function setFactor(chart) {
max = null;
min = null;
for (var id in chart.nodes) {
var node = chart.nodes[id];
if (node.data["salary"]) {
var salary = node.data["salary"].replace("$", "");
if (isNumeric(salary)) {
if (max == null && min == null) {
max = salary;
min = salary;
}
else {
max = Math.max(salary, max);
min = Math.min(salary, min);
}
}
}
}
factor = (max - min) / 100;
}
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
primaryFields: ["salary", "name"],
photoFields: ["image"],
enableZoom: false,
enableEdit: false,
enableDetailsView: false,
dataSource: source,
renderNodeEvent: renderNodeEventHandler
});
function renderNodeEventHandler(sender, args) {
var salary = args.node.data["salary"].replace("$", "");
if (!isNumeric(salary)) {
return;
}
if (!factor) {
setFactor(sender);
}
var val = (salary - min) / factor;
var rgb = interpolateColor(start, end, val / 100);
var hex = rgb2hex(rgb);
args.content[1] = args.content[1].replace("rect", "rect style='fill: " + hex + "; stroke: " + hex + ";'")
}
</script>
这是已编写的javascript代码的示例。因此,会发生一些错误,例如getorgchart.js:1 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
因此,即使这些资产已输入到项目文件夹中。