I'm trying to use the library uPlot into my view. But I'm getting an error of Uncaught ReferenceError: uPlot is not defined
it seems that it can't find the uPlot library but this library is already loaded in the bootstrap as shown below
// resources/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) {}
Now the chart.js is loaded in the resource/js/app.js
as shown below
require('./bootstrap');
require('./chart');
Now in my chart.js
I have this
$(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'));
});
});
Now the element lineChart is already defined but it's throwing an error when the script reaches the line new uPlot
. I checked the pub/js/app.js
and the uPlot was successfully imported. As well as the chart.js is included in the app.js. But one this I noticed is the script of chart.js is added at the very top of the app.js file while the uPlot is added at the bottom part.
How can I fix this? It doesn't seem like the uPlot library is being read or loaded in the chart.js file
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire