chart.js
来自「Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是」· JavaScript 代码 · 共 528 行 · 第 1/2 页
JS
528 行
this.vectorNode = this.plotArea = this.dataGroup = this.axisGroup = null;
}, render:function () {
if (this.dataGroup) {
while (this.dataGroup.childNodes.length > 0) {
this.dataGroup.removeChild(this.dataGroup.childNodes[0]);
}
} else {
this.init();
}
for (var i = 0; i < this.series.length; i++) {
dojo.widget.vml.Chart.Plotter.plot(this.series[i], this);
}
}, postCreate:function () {
var table = this.domNode.getElementsByTagName("table")[0];
if (table) {
var ranges = this.parseProperties(table);
var bRangeX = false;
var bRangeY = false;
var axisValues = this.parseData(table);
if (!bRangeX) {
this.properties.axes.x.range = {min:axisValues.x.min, max:axisValues.x.max};
}
if (!bRangeY) {
this.properties.axes.y.range = {min:axisValues.y.min, max:axisValues.y.max};
}
this.setAxesPlot(table);
this.domNode.removeChild(table);
}
if (this.series.length > 0) {
this.render();
}
}});
dojo.widget.vml.Chart.Plotter = new function () {
var self = this;
var plotters = {};
var types = dojo.widget.Chart.PlotTypes;
this.getX = function (value, chart) {
var v = parseFloat(value);
var min = chart.properties.axes.x.range.min;
var max = chart.properties.axes.x.range.max;
var ofst = 0 - min;
min += ofst;
max += ofst;
v += ofst;
var xmin = 0;
var xmax = chart.properties.width - chart.properties.padding.left - chart.properties.padding.right;
var x = (v * ((xmax - xmin) / max)) + xmin;
return x;
};
this.getY = function (value, chart) {
var v = parseFloat(value);
var max = chart.properties.axes.y.range.max;
var min = chart.properties.axes.y.range.min;
var ofst = 0;
if (min < 0) {
ofst += Math.abs(min);
}
min += ofst;
max += ofst;
v += ofst;
var ymin = chart.properties.height - chart.properties.padding.top - chart.properties.padding.bottom;
var ymax = 0;
var y = (((ymin - ymax) / (max - min)) * (max - v)) + ymax;
return y;
};
this.addPlotter = function (name, func) {
plotters[name] = func;
};
this.plot = function (series, chart) {
if (series.values.length == 0) {
return;
}
if (series.plotType && plotters[series.plotType]) {
return plotters[series.plotType](series, chart);
} else {
if (chart.plotType && plotters[chart.plotType]) {
return plotters[chart.plotType](series, chart);
}
}
};
plotters["bar"] = function (series, chart) {
var space = 1;
var lastW = 0;
var ys = [];
var yAxis = self.getY(chart.properties.axes.x.plotAt, chart);
var yA = yAxis;
for (var i = 0; i < series.values.length; i++) {
var x = self.getX(series.values[i].x, chart);
var w;
if (i == series.values.length - 1) {
w = lastW;
} else {
w = self.getX(series.values[i + 1].x, chart) - x - space;
lastW = w;
}
x -= (w / 2);
var y = self.getY(series.values[i].value, chart);
var h = Math.abs(yA - y);
if (parseFloat(series.values[i].value) < chart.properties.axes.x.plotAt) {
y = yA;
}
var bar = document.createElement("v:rect");
bar.style.position = "absolute";
bar.style.top = y + "px";
bar.style.left = x + "px";
bar.style.width = w + "px";
bar.style.height = h + "px";
bar.setAttribute("fillColor", series.color);
bar.setAttribute("stroked", "false");
bar.style.antialias = "false";
bar.setAttribute("title", series.label + " (" + i + "): " + series.values[i].value);
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.9");
bar.appendChild(fill);
chart.dataGroup.appendChild(bar);
}
};
plotters["line"] = function (series, chart) {
var tension = 1.5;
var line = document.createElement("v:shape");
line.setAttribute("strokeweight", "2px");
line.setAttribute("strokecolor", series.color);
line.setAttribute("fillcolor", "none");
line.setAttribute("filled", "false");
line.setAttribute("title", series.label);
line.setAttribute("coordsize", chart.properties.width + "," + chart.properties.height);
line.style.position = "absolute";
line.style.top = "0px";
line.style.left = "0px";
line.style.width = chart.properties.width + "px";
line.style.height = chart.properties.height + "px";
var stroke = document.createElement("v:stroke");
stroke.setAttribute("opacity", "0.85");
line.appendChild(stroke);
var path = [];
for (var i = 0; i < series.values.length; i++) {
var x = Math.round(self.getX(series.values[i].x, chart));
var y = Math.round(self.getY(series.values[i].value, chart));
if (i == 0) {
path.push("m");
path.push(x + "," + y);
} else {
var lastx = Math.round(self.getX(series.values[i - 1].x, chart));
var lasty = Math.round(self.getY(series.values[i - 1].value, chart));
var dx = x - lastx;
var dy = y - lasty;
path.push("c");
var cx = Math.round((x - (tension - 1) * (dx / tension)));
path.push(cx + "," + lasty);
cx = Math.round((x - (dx / tension)));
path.push(cx + "," + y);
path.push(x + "," + y);
}
}
line.setAttribute("path", path.join(" ") + " e");
chart.dataGroup.appendChild(line);
};
plotters["area"] = function (series, chart) {
var tension = 1.5;
var line = document.createElement("v:shape");
line.setAttribute("strokeweight", "1px");
line.setAttribute("strokecolor", series.color);
line.setAttribute("fillcolor", series.color);
line.setAttribute("title", series.label);
line.setAttribute("coordsize", chart.properties.width + "," + chart.properties.height);
line.style.position = "absolute";
line.style.top = "0px";
line.style.left = "0px";
line.style.width = chart.properties.width + "px";
line.style.height = chart.properties.height + "px";
var stroke = document.createElement("v:stroke");
stroke.setAttribute("opacity", "0.8");
line.appendChild(stroke);
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.4");
line.appendChild(fill);
var path = [];
for (var i = 0; i < series.values.length; i++) {
var x = Math.round(self.getX(series.values[i].x, chart));
var y = Math.round(self.getY(series.values[i].value, chart));
if (i == 0) {
path.push("m");
path.push(x + "," + y);
} else {
var lastx = Math.round(self.getX(series.values[i - 1].x, chart));
var lasty = Math.round(self.getY(series.values[i - 1].value, chart));
var dx = x - lastx;
var dy = y - lasty;
path.push("c");
var cx = Math.round((x - (tension - 1) * (dx / tension)));
path.push(cx + "," + lasty);
cx = Math.round((x - (dx / tension)));
path.push(cx + "," + y);
path.push(x + "," + y);
}
}
path.push("l");
path.push(x + "," + self.getY(0, chart));
path.push("l");
path.push(self.getX(0, chart) + "," + self.getY(0, chart));
line.setAttribute("path", path.join(" ") + " x e");
chart.dataGroup.appendChild(line);
};
plotters["scatter"] = function (series, chart) {
var r = 6;
for (var i = 0; i < series.values.length; i++) {
var x = self.getX(series.values[i].x, chart);
var y = self.getY(series.values[i].value, chart);
var mod = r / 2;
var point = document.createElement("v:rect");
point.setAttribute("fillcolor", series.color);
point.setAttribute("strokecolor", series.color);
point.setAttribute("title", series.label + ": " + series.values[i].value);
point.style.position = "absolute";
point.style.rotation = "45";
point.style.top = (y - mod) + "px";
point.style.left = (x - mod) + "px";
point.style.width = r + "px";
point.style.height = r + "px";
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.6");
point.appendChild(fill);
chart.dataGroup.appendChild(point);
}
};
plotters["bubble"] = function (series, chart) {
var minR = 1;
var min = chart.properties.axes.x.range.min;
var max = chart.properties.axes.x.range.max;
var ofst = 0 - min;
min += ofst;
max += ofst;
var xmin = chart.properties.padding.left;
var xmax = chart.properties.width - chart.properties.padding.right;
var factor = (max - min) / (xmax - xmin) * 25;
for (var i = 0; i < series.values.length; i++) {
var size = series.values[i].size;
if (isNaN(parseFloat(size))) {
size = minR;
}
var radius = (parseFloat(size) * factor) / 2;
var diameter = radius * 2;
var cx = self.getX(series.values[i].x, chart);
var cy = self.getY(series.values[i].value, chart);
var top = cy - radius;
var left = cx - radius;
var point = document.createElement("v:oval");
point.setAttribute("fillcolor", series.color);
point.setAttribute("title", series.label + ": " + series.values[i].value + " (" + size + ")");
point.setAttribute("stroked", "false");
point.style.position = "absolute";
point.style.top = top + "px";
point.style.left = left + "px";
point.style.width = diameter + "px";
point.style.height = diameter + "px";
var fill = document.createElement("v:fill");
fill.setAttribute("opacity", "0.8");
point.appendChild(fill);
chart.dataGroup.appendChild(point);
}
};
}();
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?