سلام
من یه قالب اماده دارم که توی این قالب در یک سری فایل جاوا اسکریپت توابعی برای نمودارها و... نوشته شده.
پروژه من با استفاده از vue و جنگو رست فریمورک هست و در یکی از کامپوننتها میخوام که از نمودارهایی که خود قالب طراحی کرده استفاده کنم. اما مشکل اینجاس که توابع توی فایل جاوا اسکریپت به صورت IIFE یعنی به این فرمت:
!function (t) {
var e = {};
function r(o) {
if (e[o]) return e[o].exports;
var n = e[o] = {i: o, l: !1, exports: {}};
return t[o].call(n.exports, n, n.exports, r), n.l = !0, n.exports
}
r.m = t, r.c = e, r.d = function (t, e, o) {
r.o(t, e) || Object.defineProperty(t, e, {enumerable: !0, get: o})
}, r.r = function (t) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(t, "__esModule", {value: !0})
}, r.t = function (t, e) {
if (1 & e && (t = r(t)), 8 & e) return t;
if (4 & e && "object" == typeof t && t && t.__esModule) return t;
var o = Object.create(null);
if (r.r(o), Object.defineProperty(o, "default", {
enumerable: !0,
value: t
}), 2 & e && "string" != typeof t) for (var n in t) r.d(o, n, function (e) {
return t[e]
}.bind(null, n));
return o
}, r.n = function (t) {
var e = t && t.__esModule ? function () {
return t.default
} : function () {
return t
};
return r.d(e, "a", e), e
}, r.o = function (t, e) {
return Object.prototype.hasOwnProperty.call(t, e)
}, r.p = "/", r(r.s = 53)
}({
53: function (t, e, r) {
t.exports = r(54)
}, 54: function (t, e) {
$((function (t) {
"use strict";
(e = $("#btc-market")).height(50);
new Chart(e, {
type: "line",
data: {
labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
type: "line",
datasets: [{
data: [85, 75, 96, 84, 85, 92, 79, 78, 74, 85, 86, 80],
label: "قیمت اتریوم",
backgroundColor: "rgba(98, 89, 202, 0.2)",
borderColor: "#6259ca",
borderWidth: "2",
pointBorderColor: "transparent",
pointBackgroundColor: "transparent"
}]
},
options: {
maintainAspectRatio: !1,
legend: {display: !1},
responsive: !0,
tooltips: {
mode: "index",
titleFontSize: 12,
titleFontColor: "#7886a0",
bodyFontColor: "#7886a0",
backgroundColor: "#fff",
titleFontFamily: "iransans",
bodyFontFamily: "iransans",
cornerRadius: 3,
intersect: !1
},
scales: {
xAxes: [{
gridLines: {color: "transparent", zeroLineColor: "transparent"},
ticks: {fontSize: 2, fontColor: "transparent"}
}], yAxes: [{display: !1, ticks: {display: !1}}]
},
title: {display: !1},
elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
}
});
(e = $("#ethereum-market")).height(50);
new Chart(e, {
type: "line",
data: {
labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
type: "line",
datasets: [{
data: [34, 23, 54, 34, 56, 76, 34, 76, 34, 55, 23, 76],
label: "قیمت اتریوم",
backgroundColor: "rgba(98, 89, 202, 0.2)",
borderColor: "#6259ca",
borderWidth: "2",
pointBorderColor: "transparent",
pointBackgroundColor: "transparent"
}]
},
options: {
maintainAspectRatio: !1,
legend: {display: !1},
responsive: !0,
tooltips: {
mode: "index",
titleFontSize: 12,
titleFontColor: "#7886a0",
bodyFontColor: "#7886a0",
backgroundColor: "#fff",
titleFontFamily: "iransans",
bodyFontFamily: "iransans",
cornerRadius: 3,
intersect: !1
},
scales: {
xAxes: [{
gridLines: {color: "transparent", zeroLineColor: "transparent"},
ticks: {fontSize: 2, fontColor: "transparent"}
}], yAxes: [{display: !1, ticks: {display: !1}}]
},
title: {display: !1},
elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
}
});
(e = $("#xrp-market")).height(50);
var e;
new Chart(e, {
type: "line",
data: {
labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
type: "line",
datasets: [{
data: [7, 5, 7, 3, 5, 2, 5, 3, 9, 6, 5, 9, 7, 3, 5, 2, 7, 10],
label: "قیمت اتریوم",
backgroundColor: "rgba(98, 89, 202, 0.2)",
borderColor: "#6259ca",
borderWidth: "2",
pointBorderColor: "transparent",
pointBackgroundColor: "transparent"
}]
},
options: {
maintainAspectRatio: !1,
legend: {display: !1},
responsive: !0,
tooltips: {
mode: "index",
titleFontSize: 12,
titleFontColor: "#7886a0",
bodyFontColor: "#7886a0",
backgroundColor: "#fff",
titleFontFamily: "iransans",
bodyFontFamily: "iransans",
cornerRadius: 3,
intersect: !1
},
scales: {
xAxes: [{
gridLines: {color: "transparent", zeroLineColor: "transparent"},
ticks: {fontSize: 2, fontColor: "transparent"}
}], yAxes: [{display: !1, ticks: {display: !1}}]
},
title: {display: !1},
elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
}
});
(e = $("#ltc-market")).height(50);
new Chart(e, {
type: "line",
data: {
labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
type: "line",
datasets: [{
data: [15, 6, 16, 11, 12, 15, 10, 19, 16, 13, 12, 15, 7, 16, 11],
label: "قیمت اتریوم",
backgroundColor: "rgba(98, 89, 202, 0.2)",
borderColor: "#6259ca",
borderWidth: "2",
pointBorderColor: "transparent",
pointBackgroundColor: "transparent"
}]
},
options: {
maintainAspectRatio: !1,
legend: {display: !1},
responsive: !0,
tooltips: {
mode: "index",
titleFontSize: 12,
titleFontColor: "#7886a0",
bodyFontColor: "#7886a0",
backgroundColor: "#fff",
titleFontFamily: "iransans",
bodyFontFamily: "iransans",
cornerRadius: 3,
intersect: !1
},
scales: {
xAxes: [{
gridLines: {color: "transparent", zeroLineColor: "transparent"},
ticks: {fontSize: 2, fontColor: "transparent"}
}], yAxes: [{display: !1, ticks: {display: !1}}]
},
title: {display: !1},
elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
}
})
}))
}
});
حالا من میخوام این تابع رو توی کامپوننت زمانی که mount میشه فراخوانی کنم ولی واقعا نمیدونم چه تغییری باید توی فایل یا کدها بدم.
ممنون میشم اگه کسی همچین مشکلی داشته راهنمایی کنه.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟