📄 plotters.js
字号:
path.setAttribute("strokecolor", data[i][0].series.color);
path.setAttribute("fillcolor", data[i][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 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);
}
// add the circle.
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); }
}
// now run the path backwards from the previous series.
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; // HTMLDivElement
},
/*********************************************************
* Single plotters: one series at a time.
*********************************************************/
DataBar: function(
/* array */data,
/* dojo.charting.PlotArea */plotarea,
/* dojo.charting.Plot */plot,
/* function? */applyTo
){
// summary
// Plots a set of bars in relation to y==0.
// Bindings: x/y
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); // the width of each group.
var yOrigin = plot.axisY.getCoord(plot.axisX.origin, plotarea, plot);
for(var i=0; i<n; i++){
// calculate offset
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; // HTMLDivElement
},
Line: function(
/* array */data,
/* dojo.charting.PlotArea */plotarea,
/* dojo.charting.Plot */plot,
/* function? */applyTo
){
// summary
// Plots the series as a line.
// Bindings: x/y
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
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);
}
// add the circle.
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; // HTMLDivElement
},
CurvedLine: function(
/* array */data,
/* dojo.charting.PlotArea */plotarea,
/* dojo.charting.Plot */plot,
/* function? */applyTo
){
// summary
// Plots the series as a line with a tension factor for softening.
// Bindings: x/y
var tension = 3;
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
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);
}
// add the circle.
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; // HTMLDivElement
},
Area: function(
/* array */data,
/* dojo.charting.PlotArea */plotarea,
/* dojo.charting.Plot */plot,
/* function? */applyTo
){
// summary
// Plots the series as an area.
// Bindings: x/y
var area = plotarea.getArea();
var group = dojo.charting.Plotters._group(plotarea);
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);
}
// add the circle.
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);
return group; // HTMLDivElement
},
CurvedArea: function(
/* array */data,
/* dojo.charting.PlotArea */plotarea,
/* dojo.charting.Plot */plot,
/* function? */applyTo
){
// summary
// Plots the series as an area with a tension for softening.
// Bindings: x/y
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -