plotters.js
来自「Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是」· JavaScript 代码 · 共 890 行 · 第 1/3 页
JS
890 行
path.style.position = "absolute";
path.style.top = "0px";
path.style.left = "0px";
path.style.width = area.right - area.left + "px";
path.style.height = area.bottom - area.top + "px";
var stroke = document.createElement("v:stroke");
stroke.setAttribute("opacity", "0.8");
path.appendChild(stroke);
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.4");
path.appendChild(fill);
var cmd = [];
var r = 3;
for (var j = 0; j < data[i].length; j++) {
var values = data[i];
var x = Math.round(plot.axisX.getCoord(values[j].x, plotarea, plot));
var y = Math.round(plot.axisY.getCoord(values[j].y, plotarea, plot));
if (j == 0) {
cmd.push("m");
cmd.push(x + "," + y);
} else {
var lastx = Math.round(plot.axisX.getCoord(values[j - 1].x, plotarea, plot));
var lasty = Math.round(plot.axisY.getCoord(values[j - 1].y, plotarea, plot));
var dx = x - lastx;
var dy = y - lasty;
cmd.push("c");
var cx = Math.round((x - (tension - 1) * (dx / tension)));
cmd.push(cx + "," + lasty);
cx = Math.round((x - (dx / tension)));
cmd.push(cx + "," + y);
cmd.push(x + "," + y);
}
var c = document.createElement("v:oval");
c.setAttribute("strokeweight", "1px");
c.setAttribute("strokecolor", values[j].series.color);
c.setAttribute("fillcolor", values[j].series.color);
var str = document.createElement("v:stroke");
str.setAttribute("opacity", "0.8");
c.appendChild(str);
str = document.createElement("v:fill");
str.setAttribute("opacity", "0.6");
c.appendChild(str);
var s = c.style;
s.position = "absolute";
s.top = (y - r) + "px";
s.left = (x - r) + "px";
s.width = (r * 2) + "px";
s.height = (r * 2) + "px";
group.appendChild(c);
if (applyTo) {
applyTo(c, data[j].src);
}
}
if (i == 0) {
cmd.push("l");
cmd.push(x + "," + Math.round(plot.axisY.getCoord(plot.axisX.origin, plotarea, plot)));
cmd.push("l");
cmd.push(Math.round(plot.axisX.getCoord(data[0][0].x, plotarea, plot)) + "," + Math.round(plot.axisY.getCoord(plot.axisX.origin, plotarea, plot)));
} else {
var values = data[i - 1];
cmd.push("l");
cmd.push(x + "," + Math.round(plot.axisY.getCoord(values[values.length - 1].y, plotarea, plot)));
for (var j = values.length - 2; j >= 0; j--) {
var x = Math.round(plot.axisX.getCoord(values[j].x, plotarea, plot));
var y = Math.round(plot.axisY.getCoord(values[j].y, plotarea, plot));
var lastx = Math.round(plot.axisX.getCoord(values[j + 1].x, plotarea, plot));
var lasty = Math.round(plot.axisY.getCoord(values[j + 1].y, plotarea, plot));
var dx = x - lastx;
var dy = y - lasty;
cmd.push("c");
var cx = Math.round((x - (tension - 1) * (dx / tension)));
cmd.push(cx + "," + lasty);
cx = Math.round((x - (dx / tension)));
cmd.push(cx + "," + y);
cmd.push(x + "," + y);
}
}
path.setAttribute("path", cmd.join(" ") + " x e");
group.appendChild(path);
}
return group;
}, DataBar:function (data, plotarea, plot, applyTo) {
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
var n = data.length;
var w = (area.right - area.left) / (plot.axisX.range.upper - plot.axisX.range.lower);
var yOrigin = plot.axisY.getCoord(plot.axisX.origin, plotarea, plot);
for (var i = 0; i < n; i++) {
var value = data[i].y;
var yA = yOrigin;
var x = plot.axisX.getCoord(data[i].x, plotarea, plot) - (w / 2) + 1;
var y = plot.axisY.getCoord(value, plotarea, plot);
var h = Math.abs(yA - y);
if (value < plot.axisX.origin) {
yA = y;
y = yOrigin;
}
var bar = document.createElement("v:rect");
bar.style.position = "absolute";
bar.style.top = y + 1 + "px";
bar.style.left = x + "px";
bar.style.width = w + "px";
bar.style.height = h + "px";
bar.setAttribute("fillColor", data[i].series.color);
bar.setAttribute("stroked", "false");
bar.style.antialias = "false";
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.6");
bar.appendChild(fill);
if (applyTo) {
applyTo(bar, data[i].src);
}
group.appendChild(bar);
}
return group;
}, Line:function (data, plotarea, plot, applyTo) {
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
if (data.length == 0) {
return group;
}
var path = document.createElement("v:shape");
path.setAttribute("strokeweight", "2px");
path.setAttribute("strokecolor", data[0].series.color);
path.setAttribute("fillcolor", "none");
path.setAttribute("filled", "false");
path.setAttribute("coordsize", (area.right - area.left) + "," + (area.bottom - area.top));
path.style.position = "absolute";
path.style.top = "0px";
path.style.left = "0px";
path.style.width = area.right - area.left + "px";
path.style.height = area.bottom - area.top + "px";
var stroke = document.createElement("v:stroke");
stroke.setAttribute("opacity", "0.8");
path.appendChild(stroke);
var cmd = [];
var r = 3;
for (var i = 0; i < data.length; i++) {
var x = Math.round(plot.axisX.getCoord(data[i].x, plotarea, plot));
var y = Math.round(plot.axisY.getCoord(data[i].y, plotarea, plot));
if (i == 0) {
cmd.push("m");
cmd.push(x + "," + y);
} else {
cmd.push("l");
cmd.push(x + "," + y);
}
var c = document.createElement("v:oval");
c.setAttribute("strokeweight", "1px");
c.setAttribute("strokecolor", data[i].series.color);
c.setAttribute("fillcolor", data[i].series.color);
var str = document.createElement("v:stroke");
str.setAttribute("opacity", "0.8");
c.appendChild(str);
str = document.createElement("v:fill");
str.setAttribute("opacity", "0.6");
c.appendChild(str);
var s = c.style;
s.position = "absolute";
s.top = (y - r) + "px";
s.left = (x - r) + "px";
s.width = (r * 2) + "px";
s.height = (r * 2) + "px";
group.appendChild(c);
if (applyTo) {
applyTo(c, data[i].src);
}
}
path.setAttribute("path", cmd.join(" ") + " e");
group.appendChild(path);
return group;
}, CurvedLine:function (data, plotarea, plot, applyTo) {
var tension = 3;
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
if (data.length == 0) {
return group;
}
var path = document.createElement("v:shape");
path.setAttribute("strokeweight", "2px");
path.setAttribute("strokecolor", data[0].series.color);
path.setAttribute("fillcolor", "none");
path.setAttribute("filled", "false");
path.setAttribute("coordsize", (area.right - area.left) + "," + (area.bottom - area.top));
path.style.position = "absolute";
path.style.top = "0px";
path.style.left = "0px";
path.style.width = area.right - area.left + "px";
path.style.height = area.bottom - area.top + "px";
var stroke = document.createElement("v:stroke");
stroke.setAttribute("opacity", "0.8");
path.appendChild(stroke);
var cmd = [];
var r = 3;
for (var i = 0; i < data.length; i++) {
var x = Math.round(plot.axisX.getCoord(data[i].x, plotarea, plot));
var y = Math.round(plot.axisY.getCoord(data[i].y, plotarea, plot));
if (i == 0) {
cmd.push("m");
cmd.push(x + "," + y);
} else {
var lastx = Math.round(plot.axisX.getCoord(data[i - 1].x, plotarea, plot));
var lasty = Math.round(plot.axisY.getCoord(data[i - 1].y, plotarea, plot));
var dx = x - lastx;
var dy = y - lasty;
cmd.push("c");
var cx = Math.round((x - (tension - 1) * (dx / tension)));
cmd.push(cx + "," + lasty);
cx = Math.round((x - (dx / tension)));
cmd.push(cx + "," + y);
cmd.push(x + "," + y);
}
var c = document.createElement("v:oval");
c.setAttribute("strokeweight", "1px");
c.setAttribute("strokecolor", data[i].series.color);
c.setAttribute("fillcolor", data[i].series.color);
var str = document.createElement("v:stroke");
str.setAttribute("opacity", "0.8");
c.appendChild(str);
str = document.createElement("v:fill");
str.setAttribute("opacity", "0.6");
c.appendChild(str);
var s = c.style;
s.position = "absolute";
s.top = (y - r) + "px";
s.left = (x - r) + "px";
s.width = (r * 2) + "px";
s.height = (r * 2) + "px";
group.appendChild(c);
if (applyTo) {
applyTo(c, data[i].src);
}
}
path.setAttribute("path", cmd.join(" ") + " e");
group.appendChild(path);
return group;
}, Area:function (data, plotarea, plot, applyTo) {
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
if (data.length == 0) {
return group;
}
var path = document.createElement("v:shape");
path.setAttribute("strokeweight", "1px");
path.setAttribute("strokecolor", data[0].series.color);
path.setAttribute("fillcolor", data[0].series.color);
path.setAttribute("coordsize", (area.right - area.left) + "," + (area.bottom - area.top));
path.style.position = "absolute";
path.style.top = "0px";
path.style.left = "0px";
path.style.width = area.right - area.left + "px";
path.style.height = area.bottom - area.top + "px";
var stroke = document.createElement("v:stroke");
stroke.setAttribute("opacity", "0.8");
path.appendChild(stroke);
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.4");
path.appendChild(fill);
var cmd = [];
var r = 3;
for (var i = 0; i < data.length; i++) {
var x = Math.round(plot.axisX.getCoord(data[i].x, plotarea, plot));
var y = Math.round(plot.axisY.getCoord(data[i].y, plotarea, plot));
if (i == 0) {
cmd.push("m");
cmd.push(x + "," + y);
} else {
cmd.push("l");
cmd.push(x + "," + y);
}
var c = document.createElement("v:oval");
c.setAttribute("strokeweight", "1px");
c.setAttribute("strokecolor", data[i].series.color);
c.setAttribute("fillcolor", data[i].series.color);
var str = document.createElement("v:stroke");
str.setAttribute("opacity", "0.8");
c.appendChild(str);
str = document.createElement("v:fill");
str.setAttribute("opacity", "0.6");
c.appendChild(str);
var s = c.style;
s.position = "absolute";
s.top = (y - r) + "px";
s.left = (x - r) + "px";
s.width = (r * 2) + "px";
s.height = (r * 2) + "px";
group.appendChild(c);
if (applyTo) {
applyTo(c, data[i].src);
}
}
cmd.push("l");
cmd.push(x + "," + Math.round(plot.axisY.getCoord(plot.axisX.origin, plotarea, plot)));
cmd.push("l");
cmd.push(Math.round(plot.axisX.getCoord(data[0].x, plotarea, plot)) + "," + Math.round(plot.axisY.getCoord(plot.axisX.origin, plotarea, plot)));
path.setAttribute("path", cmd.join(" ") + " x e");
group.appendChild(path);
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?