时间戳

首页 > 解决方案 > Laravel 未定义的 uPlot 库

laravel - Laravel 未定义的 uPlot 库

问题描述

我正在尝试将库 uPlot 用于我的视图。但是我收到一个错误，Uncaught ReferenceError: uPlot is not defined它似乎找不到 uPlot 库，但这个库已经加载到引导程序中，如下所示

// 资源/js/bootstrap.js

window._ = require('lodash');
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');

    require('../../node_modules/uplot/dist/uPlot.iife.min');

} catch (e) {}

现在 chart.js 被加载到resource/js/app.js如下图所示

require('./bootstrap');
require('./chart');

现在chart.js我有这个

$(function () {

    function getSize(elementId) {
        return {
          width: document.getElementById(elementId).offsetWidth,
          height: document.getElementById(elementId).offsetHeight,
        }
      }

  let data = [
    [0, 1, 2, 3, 4, 5, 6],
    [28, 48, 40, 19, 86, 27, 90],
    [65, 59, 80, 81, 56, 55, 40]
  ];

  const optsLineChart = {
    ... getSize('lineChart'),
    scales: {
      x: {
        time: false,
      },
      y: {
        range: [0, 100],
      },
    },
    series: [
      {},
      {
        fill: 'transparent',
        width: 5,
        stroke: 'rgba(60,141,188,1)',
      },
      {
        stroke: '#c1c7d1',
        width: 5,
        fill: 'transparent',
      },
    ],
  };

  let lineChart = new uPlot(optsLineChart, data, document.getElementById('lineChart'));
  window.addEventListener("resize", e => {
    lineChart.setSize(getSize('lineChart'));
  });
});

现在元素 lineChart 已经定义，但是当脚本到达 line 时它​​会抛出错误new uPlot。我检查了pub/js/app.jsuPlot 已成功导入。以及 chart.js 包含在 app.js 中。但是我注意到的一个是 chart.js 的脚本被添加到 app.js 文件的最顶部，而 uPlot 被添加到底部。

我怎样才能解决这个问题？似乎没有在 chart.js 文件中读取或加载 uPlot 库

标签： laravellaravel-5laravel-8

解决方案

推荐阅读