راکت

اجرای فایل جاوا اسکریپت در کامپوننت vue

1 پاسخ

سلام
من یه قالب اماده دارم که توی این قالب در یک سری فایل جاوا اسکریپت توابعی برای نمودارها و... نوشته شده.
پروژه من با استفاده از 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 میشه فراخوانی کنم ولی واقعا نمیدونم چه تغییری باید توی فایل یا کدها بدم.
ممنون میشم اگه کسی همچین مشکلی داشته راهنمایی کنه.

ثبت پرسش جدید

پاسخ‌ها

1
سبحان مولایی
سبحان مولایی
@websaz

تخصص: برنامه‌نویس وب: Python :: Django :: Node :: Php :: Laravel :: JS :: React :: React Native

سلام فکر کنم این پلاگین به شما کمک کند.
@aranjbar1372

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام