150 lines
12 KiB
JavaScript
150 lines
12 KiB
JavaScript
import {
|
|
__commonJS
|
|
} from "./chunk-A5ICIBVI.js";
|
|
|
|
// node_modules/schart.js/lib/sChart.min.js
|
|
var require_sChart_min = __commonJS({
|
|
"node_modules/schart.js/lib/sChart.min.js"(exports, module) {
|
|
!function(t, i) {
|
|
typeof exports == "object" && typeof module != "undefined" ? module.exports = i() : typeof define == "function" && define.amd ? define(i) : (t = t || self).Schart = i();
|
|
}(exports, function() {
|
|
"use strict";
|
|
function a(t, i) {
|
|
for (var e = 0; e < i.length; e++) {
|
|
var a2 = i[e];
|
|
a2.enumerable = a2.enumerable || false, a2.configurable = true, "value" in a2 && (a2.writable = true), Object.defineProperty(t, a2.key, a2);
|
|
}
|
|
}
|
|
function o(t) {
|
|
return function(t2) {
|
|
if (Array.isArray(t2)) {
|
|
for (var i = 0, e = new Array(t2.length); i < t2.length; i++)
|
|
e[i] = t2[i];
|
|
return e;
|
|
}
|
|
}(t) || function(t2) {
|
|
if (Symbol.iterator in Object(t2) || Object.prototype.toString.call(t2) === "[object Arguments]")
|
|
return Array.from(t2);
|
|
}(t) || function() {
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance");
|
|
}();
|
|
}
|
|
var f = window.devicePixelRatio || 1, g = 10 * f, u = g / 2;
|
|
return function() {
|
|
function e(t, i) {
|
|
!function(t2, i2) {
|
|
if (!(t2 instanceof i2))
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}(this, e), this.canvas = function(t2) {
|
|
var i2 = document.getElementById(t2), e2 = i2.parentNode.clientWidth, a2 = i2.parentNode.clientHeight;
|
|
return i2.style.width = e2 + "px", i2.style.height = a2 + "px", i2.width = e2 * f, i2.height = a2 * f, i2;
|
|
}(t), this.ctx = this.canvas.getContext("2d"), this.type = "bar", this.showValue = true, this.showGrid = true, this.topPadding = 60 * f, this.leftPadding = 50 * f, this.rightPadding = 10 * f, this.bottomPadding = 50 * f, this.yEqual = 5, this.yLength = 0, this.xLength = 0, this.ySpace = 0, this.xRorate = 0, this.yRorate = 0, this.xRotate = 0, this.yRotate = 0, this.bgColor = "#fff", this.axisColor = "#666", this.gridColor = "#eee", this.title = { text: "", color: "#666", position: "top", font: "bold " + 18 * f + "px Arial", top: g, bottom: u }, this.legend = { display: true, position: "top", color: "#666", font: 14 * f + "px Arial", top: 45 * f, bottom: 15 * f, textWidth: 0 }, this.radius = 100 * f, this.innerRadius = 60 * f, this.colorList = ["#4A90E2", "#F5A623", "#ff5858", "#5e64ff", "#2AC766", "#743ee2", "#b554ff", "#199475"], this.init(i);
|
|
}
|
|
return function(t, i, e2) {
|
|
i && a(t.prototype, i), e2 && a(t, e2);
|
|
}(e, [{ key: "init", value: function(t) {
|
|
if (t.title = Object.assign({}, this.title, t.title), t.legend = Object.assign({}, this.legend, t.legend), Object.assign(this, t), !t.labels || !t.labels.length)
|
|
throw new Error("\u7F3A\u5C11\u4E3B\u8981\u53C2\u6570labels");
|
|
if (!t.datasets || !t.datasets.length)
|
|
throw new Error("\u7F3A\u5C11\u4E3B\u8981\u53C2\u6570datasets");
|
|
this.drawBackground(), this.type === "bar" || this.type === "line" ? this.renderBarChart() : this.renderPieChart(), this.drawLegend();
|
|
} }, { key: "renderBarChart", value: function() {
|
|
this.yLength = Math.floor((this.canvas.height - this.topPadding - this.bottomPadding - g) / this.yEqual), this.xLength = Math.floor((this.canvas.width - this.leftPadding - this.rightPadding - g) / this.labels.length), this.ySpace = function(t, i) {
|
|
var e2 = t.map(function(t2) {
|
|
return t2.data.reduce(function(t3, i2) {
|
|
return i2 < t3 ? t3 : i2;
|
|
});
|
|
}), a2 = Math.ceil(Math.max.apply(Math, o(e2)) / i), s = a2.toString().length - 1;
|
|
return s = 2 < s ? 2 : s, Math.ceil(a2 / Math.pow(10, s)) * Math.pow(10, s);
|
|
}(this.datasets, this.yEqual), this.drawXAxis(), this.drawYAxis(), this.drawBarContent();
|
|
} }, { key: "drawBarContent", value: function() {
|
|
var t = this.ctx, i = this.datasets.length;
|
|
t.beginPath();
|
|
for (var e2 = 0; e2 < i; e2++) {
|
|
t.font = this.legend.font, this.legend.textWidth += Math.ceil(t.measureText(this.datasets[e2].label).width), t.fillStyle = t.strokeStyle = this.datasets[e2].fillColor || this.colorList[e2];
|
|
for (var a2 = this.datasets[e2].data, s = 0; s < a2.length; s++)
|
|
if (!(s > this.labels.length - 1)) {
|
|
var o2 = this.xLength / (i + 1), h = this.yLength / this.ySpace, l = this.leftPadding + this.xLength * s + o2 * (e2 + 0.5), n = l + o2, r = this.canvas.height - this.bottomPadding, d = r - a2[s] * h;
|
|
if (this.type === "bar")
|
|
t.fillRect(l, d, n - l, r - d), this.drawValue(a2[s], l + o2 / 2, d - u);
|
|
else if (this.type === "line") {
|
|
var c = this.leftPadding + this.xLength * (s + 0.5);
|
|
t.beginPath(), t.arc(c, d, 3 * f, 0, 2 * Math.PI, true), t.fill(), s !== 0 && (t.beginPath(), t.strokeStyle = this.datasets[e2].fillColor || this.colorList[e2], t.lineWidth = 2 * f, t.moveTo(c - this.xLength, r - a2[s - 1] * h), t.lineTo(c, d), t.stroke(), t.lineWidth = 1 * f), this.drawValue(a2[s], c, d - g);
|
|
}
|
|
}
|
|
}
|
|
t.stroke();
|
|
} }, { key: "renderPieChart", value: function() {
|
|
for (var t = this.ctx, i = this.labels.length, e2 = this.datasets[0], a2 = e2.data, s = a2.reduce(function(t2, i2) {
|
|
return t2 + i2;
|
|
}), o2 = -Math.PI / 2, h = this.canvas.width / 2, l = this.canvas.height / 2, n = 0; n < i; n++) {
|
|
t.font = this.legend.font, this.legend.textWidth += Math.ceil(t.measureText(this.labels[n]).width), t.beginPath(), t.strokeStyle = t.fillStyle = e2.colorList && e2.colorList[n] || this.colorList[n], t.moveTo(h, l);
|
|
var r = o2, d = o2 += a2[n] / s * 2 * Math.PI;
|
|
t.arc(h, l, this.radius, r, d), t.closePath(), t.fill();
|
|
var c = (r + d) / 2;
|
|
this.drawPieValue(a2[n], c);
|
|
}
|
|
this.type === "ring" && (t.beginPath(), t.fillStyle = this.bgColor, t.arc(h, l, this.innerRadius, 0, 2 * Math.PI), t.closePath(), t.fill());
|
|
} }, { key: "drawValue", value: function(t, i, e2) {
|
|
var a2 = this.ctx;
|
|
this.showValue && (a2.textBaseline = "middle", a2.font = 12 * f + "px Arial", a2.textAlign = "center", a2.fillText(t, i, e2));
|
|
} }, { key: "drawPieValue", value: function(t, i) {
|
|
var e2 = this.ctx;
|
|
if (this.showValue) {
|
|
var a2 = this.canvas.width / 2, s = this.canvas.height / 2, o2 = Math.ceil(Math.abs(this.radius * Math.cos(i))), h = Math.floor(Math.abs(this.radius * Math.sin(i)));
|
|
e2.textBaseline = "middle", this.showValue && (i <= 0 ? (e2.textAlign = "left", e2.moveTo(a2 + o2, s - h), e2.lineTo(a2 + o2 + g, s - h - g), e2.moveTo(a2 + o2 + g, s - h - g), e2.lineTo(a2 + o2 + 3 * g, s - h - g), e2.stroke(), e2.fillText(t, a2 + o2 + 3.5 * g, s - h - g)) : 0 < i && i <= Math.PI / 2 ? (e2.textAlign = "left", e2.moveTo(a2 + o2, s + h), e2.lineTo(a2 + o2 + g, s + h + g), e2.moveTo(a2 + o2 + g, s + h + g), e2.lineTo(a2 + o2 + 3 * g, s + h + g), e2.stroke(), e2.fillText(t, a2 + o2 + 3.5 * g, s + h + g)) : i > Math.PI / 2 && i < Math.PI ? (e2.textAlign = "right", e2.moveTo(a2 - o2, s + h), e2.lineTo(a2 - o2 - g, s + h + g), e2.moveTo(a2 - o2 - g, s + h + g), e2.lineTo(a2 - o2 - 3 * g, s + h + g), e2.stroke(), e2.fillText(t, a2 - o2 - 3.5 * g, s + h + g)) : (e2.textAlign = "right", e2.moveTo(a2 - o2, s - h), e2.lineTo(a2 - o2 - g, s - h - g), e2.moveTo(a2 - o2 - g, s - h - g), e2.lineTo(a2 - o2 - 3 * g, s - h - g), e2.stroke(), e2.fillText(t, a2 - o2 - 3.5 * g, s - h - g)));
|
|
}
|
|
} }, { key: "drawBackground", value: function() {
|
|
this.ctx.fillStyle = this.bgColor, this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height), this.drawTitle();
|
|
} }, { key: "drawTitle", value: function() {
|
|
var t = this.title;
|
|
if (t.text) {
|
|
var i = this.ctx;
|
|
i.beginPath(), i.font = t.font, i.textAlign = "center", i.fillStyle = t.color, t.position === "top" ? (i.textBaseline = "top", i.fillText(t.text, this.canvas.width / 2, t.top)) : (i.textBaseline = "bottom", i.fillText(t.text, this.canvas.width / 2, this.canvas.height - t.bottom));
|
|
}
|
|
} }, { key: "drawXAxis", value: function() {
|
|
var t = this.ctx, i = this.canvas.height - this.bottomPadding + 0.5;
|
|
t.beginPath(), t.strokeStyle = this.axisColor, t.moveTo(this.leftPadding, i), t.lineTo(this.canvas.width - this.rightPadding, i), t.stroke(), this.drawXPoint();
|
|
} }, { key: "drawXPoint", value: function() {
|
|
var t = this.ctx;
|
|
t.beginPath(), t.font = 12 * f + "px Microsoft YaHei", t.textAlign = this.xRorate || this.xRotate ? "right" : "center", t.textBaseline = "top", t.fillStyle = this.axisColor;
|
|
for (var i = 0; i < this.labels.length; i++) {
|
|
var e2 = this.labels[i], a2 = this.leftPadding + this.xLength * (i + 1) + 0.5, s = this.canvas.height - this.bottomPadding;
|
|
this.showGrid ? (t.strokeStyle = this.gridColor, t.moveTo(a2, s), t.lineTo(a2, this.topPadding + g)) : (t.moveTo(a2, s), t.lineTo(a2, s - u)), t.stroke(), t.save(), t.translate(a2 - this.xLength / 2, s + u), this.xRorate ? t.rotate(-this.xRorate * Math.PI / 180) : t.rotate(-this.xRotate * Math.PI / 180), t.fillText(e2, 0, 0), t.restore();
|
|
}
|
|
} }, { key: "drawYAxis", value: function() {
|
|
var t = this.ctx;
|
|
t.beginPath(), t.strokeStyle = this.axisColor, t.moveTo(this.leftPadding - 0.5, this.canvas.height - this.bottomPadding + 0.5), t.lineTo(this.leftPadding - 0.5, this.topPadding + 0.5), t.stroke(), this.drawYPoint();
|
|
} }, { key: "drawYPoint", value: function() {
|
|
var t = this.ctx;
|
|
t.font = 12 * f + "px Microsoft YaHei", t.textAlign = "right", t.textBaseline = "middle", t.beginPath();
|
|
for (var i = 0; i < this.yEqual; i++) {
|
|
var e2 = this.leftPadding, a2 = this.canvas.height - this.bottomPadding - this.yLength * (i + 1) + 0.5;
|
|
this.showGrid ? (t.strokeStyle = this.gridColor, t.moveTo(e2, a2), t.lineTo(this.canvas.width - this.rightPadding - g, a2)) : (t.strokeStyle = this.axisColor, t.moveTo(e2 - u, a2), t.lineTo(e2, a2)), t.stroke(), t.save(), t.fillStyle = this.axisColor, t.translate(e2 - g, a2), this.yRorate ? t.rotate(-this.yRorate * Math.PI / 180) : t.rotate(-this.yRotate * Math.PI / 180), t.fillText(this.ySpace * (i + 1), 0, 0), t.restore();
|
|
}
|
|
} }, { key: "drawLegend", value: function() {
|
|
var t = this.legend;
|
|
if (t.display) {
|
|
var i = this.ctx, e2 = this.type === "pie" || this.type === "ring";
|
|
i.beginPath(), i.font = t.font, i.textAlign = "left", i.textBaseline = "middle";
|
|
for (var a2 = e2 ? this.labels.length : this.datasets.length, s = (this.canvas.width - (this.legend.textWidth + (5 * a2 - 2) * g)) / 2, o2 = 0, h = 0; h < a2; h++) {
|
|
var l = e2 ? this.datasets[0] : this.datasets[h], n = (e2 ? this.labels[h] : l.label) || "";
|
|
i.fillStyle = l.colorList && l.colorList[h] || l.fillColor || this.colorList[h], t.position === "top" ? (this.drawLegendIcon(s + 5 * g * h + o2, t.top - u, 2 * g, g), i.fillStyle = t.color, i.fillText(n, s + (5 * h + 3) * g + o2, t.top)) : t.position === "bottom" ? (this.drawLegendIcon(s + 5 * g * h + o2, this.canvas.height - t.bottom - u, 2 * g, g), i.fillStyle = t.color, i.fillText(n, s + (5 * h + 3) * g + o2, this.canvas.height - t.bottom)) : (i.fillRect(g, t.top + 2 * g * h, 2 * g, g), i.fillStyle = t.color, i.fillText(n, 4 * g, t.top + 2 * g * h + 0.5 * g)), o2 += Math.ceil(i.measureText(n).width);
|
|
}
|
|
}
|
|
} }, { key: "drawLegendIcon", value: function(t, i, e2, a2) {
|
|
var s = this.ctx;
|
|
this.type === "line" ? (s.beginPath(), s.strokeStyle = s.fillStyle, s.lineWidth = 2 * f, s.moveTo(t, i + u), s.lineTo(t + 2 * g, i + u), s.stroke(), s.lineWidth = 1 * f, s.arc(t + g, i + u, 3 * f, 0, 2 * Math.PI, true), s.fill()) : s.fillRect(t, i, e2, a2);
|
|
} }]), e;
|
|
}();
|
|
});
|
|
}
|
|
});
|
|
|
|
// dep:schart_js
|
|
var schart_js_default = require_sChart_min();
|
|
export {
|
|
schart_js_default as default
|
|
};
|
|
//# sourceMappingURL=schart_js.js.map
|