-
|
I am already passing the most suitable data and firstly I cannot call it during the render, and the method updateOptions vary slow. {
"value_1": {
"categories": [
"05.18.2022",
"05.19.2022",
"05.20.2022",
"05.21.2022",
"05.22.2022",
"05.23.2022",
"05.24.2022",
"05.25.2022",
"05.26.2022",
"05.27.2022",
"05.28.2022",
"05.29.2022",
"05.30.2022",
"05.31.2022",
"06.01.2022",
"06.02.2022",
"06.03.2022",
"06.04.2022",
"06.05.2022",
"06.06.2022",
"06.07.2022",
"06.08.2022",
"06.09.2022",
"06.10.2022",
"06.11.2022",
"06.12.2022",
"06.13.2022",
"06.14.2022",
"06.15.2022",
"06.16.2022",
"06.17.2022",
"06.18.2022",
"06.19.2022",
"06.20.2022",
"06.21.2022",
"06.22.2022",
"06.23.2022",
"06.24.2022",
"06.25.2022",
"06.26.2022",
"06.27.2022",
"06.28.2022",
"06.29.2022",
"06.30.2022",
"07.01.2022",
"07.02.2022",
"07.03.2022",
"07.04.2022",
"07.05.2022",
"07.06.2022",
"07.07.2022",
"07.08.2022",
"07.09.2022",
"07.10.2022",
"07.11.2022",
"07.12.2022",
"07.13.2022",
"07.14.2022",
"07.15.2022"
],
"series": [
{
"name": "ai1",
"data": [
"18",
"95",
"36",
"33",
"72",
"94",
"91",
"5",
"15",
"15",
"46",
"99",
"74",
"44",
"54",
"58",
"24",
"48",
"46",
"18",
"80",
"45",
"31",
"10",
"93",
"41",
"9",
"64",
"68",
"56",
"63",
"69",
"91",
"50",
"99",
"40",
"78",
"27",
"62",
"67",
"81",
"14",
"94",
"13",
"26",
"47",
"75",
"36",
"11",
"42",
"82",
"58",
"56",
"46",
"94",
"15",
"67",
"63",
"79"
]
},
{
"name": "ai2",
"data": [
"55",
"16",
"81",
"21",
"95",
"37",
"45",
"57",
"39",
"42",
"2",
"8",
"28",
"99",
"41",
"67",
"46",
"28",
"12",
"56",
"12",
"87",
"50",
"70",
"29",
"78",
"90",
"44",
"43",
"13",
"21",
"88",
"12",
"87",
"46",
"31",
"45",
"1",
"73",
"49",
"29",
"81",
"91",
"37",
"59",
"2",
"81",
"44",
"78",
"13",
"57",
"44",
"12",
"76",
"65",
"39",
"35",
"26",
"18"
]
},
{
"name": "ai3",
"data": [
"62",
"65",
"100",
"57",
"94",
"30",
"22",
"51",
"43",
"57",
"72",
"65",
"68",
"28",
"21",
"58",
"95",
"29",
"52",
"40",
"62",
"34",
"39",
"41",
"72",
"50",
"90",
"34",
"76",
"97",
"21",
"51",
"42",
"95",
"65",
"90",
"25",
"15",
"27",
"75",
"4",
"17",
"10",
"38",
"20",
"71",
"30",
"50",
"69",
"26",
"46",
"80",
"2",
"33",
"99",
"80",
"30",
"16",
"83"
]
},
{
"name": "ai4",
"data": [
"13",
"91",
"38",
"76",
"25",
"3",
"12",
"33",
"33",
"88",
"97",
"9",
"99",
"96",
"45",
"23",
"10",
"79",
"89",
"65",
"78",
"4",
"27",
"46",
"7",
"64",
"30",
"29",
"88",
"69",
"37",
"24",
"93",
"84",
"4",
"93",
"80",
"31",
"15",
"72",
"1",
"9",
"18",
"63",
"26",
"97",
"99",
"58",
"55",
"3",
"80",
"86",
"49",
"25",
"82",
"38",
"57",
"19",
"8"
]
},
{
"name": "ai5",
"data": [
"69",
"99",
"26",
"25",
"61",
"80",
"81",
"44",
"51",
"41",
"16",
"46",
"80",
"30",
"23",
"9",
"61",
"83",
"70",
"18",
"92",
"85",
"53",
"73",
"22",
"2",
"72",
"57",
"49",
"45",
"91",
"46",
"88",
"76",
"27",
"81",
"29",
"83",
"1",
"77",
"88",
"93",
"8",
"10",
"94",
"22",
"83",
"86",
"38",
"90",
"66",
"78",
"14",
"30",
"13",
"28",
"92",
"74",
"26"
]
},
{
"name": "ai6",
"data": [
"11",
"56",
"56",
"83",
"79",
"71",
"22",
"80",
"37",
"57",
"79",
"16",
"82",
"60",
"9",
"67",
"45",
"37",
"68",
"93",
"48",
"35",
"88",
"83",
"36",
"52",
"13",
"36",
"84",
"51",
"4",
"44",
"96",
"33",
"43",
"59",
"38",
"81",
"27",
"48",
"87",
"31",
"77",
"70",
"21",
"85",
"3",
"81",
"70",
"68",
"29",
"69",
"63",
"28",
"98",
"92",
"48",
"3",
"20"
]
},
{
"name": "ai7",
"data": [
"26",
"2",
"80",
"18",
"30",
"100",
"2",
"68",
"96",
"66",
"95",
"53",
"76",
"65",
"35",
"31",
"75",
"8",
"1",
"30",
"39",
"71",
"37",
"85",
"53",
"31",
"41",
"56",
"69",
"34",
"40",
"44",
"90",
"13",
"59",
"22",
"35",
"33",
"74",
"71",
"30",
"27",
"9",
"40",
"39",
"53",
"69",
"2",
"79",
"80",
"57",
"62",
"26",
"7",
"42",
"30",
"99",
"18",
"82"
]
},
{
"name": "ai8",
"data": [
"72",
"82",
"78",
"46",
"62",
"27",
"39",
"40",
"38",
"34",
"8",
"24",
"48",
"90",
"83",
"52",
"66",
"39",
"68",
"27",
"42",
"20",
"45",
"91",
"60",
"46",
"59",
"71",
"86",
"58",
"21",
"61",
"63",
"62",
"18",
"48",
"18",
"75",
"90",
"75",
"20",
"57",
"89",
"69",
"66",
"39",
"13",
"95",
"79",
"23",
"80",
"20",
"52",
"46",
"23",
"26",
"88",
"50",
"5"
]
},
{
"name": "ai9",
"data": [
"41",
"37",
"7",
"80",
"30",
"15",
"31",
"72",
"82",
"35",
"36",
"79",
"92",
"74",
"24",
"41",
"22",
"35",
"55",
"86",
"86",
"63",
"35",
"34",
"27",
"34",
"66",
"10",
"43",
"85",
"34",
"100",
"33",
"12",
"34",
"55",
"14",
"19",
"20",
"16",
"13",
"90",
"47",
"45",
"69",
"37",
"75",
"13",
"64",
"97",
"88",
"79",
"34",
"74",
"23",
"34",
"59",
"13",
"86"
]
},
{
"name": "ai10",
"data": [
"57",
"3",
"99",
"87",
"7",
"39",
"22",
"61",
"4",
"62",
"86",
"23",
"13",
"96",
"74",
"26",
"19",
"96",
"89",
"12",
"9",
"36",
"11",
"57",
"33",
"27",
"92",
"60",
"78",
"89",
"99",
"68",
"17",
"85",
"59",
"55",
"51",
"88",
"9",
"30",
"9",
"21",
"6",
"79",
"58",
"38",
"62",
"79",
"1",
"46",
"90",
"29",
"54",
"94",
"2",
"39",
"2",
"97",
"17"
]
}
]
}
} var options = {
series: data['series'],
chart: {
height: 350,
type: 'line',
},
dataLabels: {
enabled: true,
},
xaxis: {
categories: data['categories']
},
}
let chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// not work
chart.updateOptions({
series: data['series'],
xaxis: {
categories: data['categories']
}
})}
// slow |
Beta Was this translation helpful? Give feedback.
Answered by
POMXARK
May 13, 2023
Replies: 2 comments
-
|
it turned out to be due to the large size of the js file 4.6 mg |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
the library is very dependent on optimization
laravel mix
const mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//require('laravel-mix-compress');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin() // to estimate the relative size of js files, it is necessary when optimizing
],
stats: {
children: true,
},
});
mix
.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/css/app.scss', 'public/css')
.sass('resources/assets/scss/style.scss', 'public/css')
.css('resources/assets/fonts/feather.css', 'public/css')
.css('resources/assets/fonts/fontawesome.css', 'public/css')
.css('resources/assets/fonts/material.css', 'public/css')
.copy( 'resources/assets/images', 'public/images' )
.copy( 'resources/assets/jquery_modules', 'public/jquery_modules' )
.css( 'resources/css/plugins/bootstrap.min.css', 'public/css' )
.sourceMaps()
;
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
validate:'jquery-validation',
DataTable : 'datatables.net-bs',
});
mix.extract([
'vue',
'@vue',
'jquery',
'bootstrap',
'bootstrap-sass',
'@popperjs/core/lib',
'datatables.net',
'datatables.net-vue3',
'datatables.net-bs',
'datatables.net-bs5',
'datatables.net-responsive',
'datatables.net-responsive-bs5/css',
'datatables.net-plugins/i18n',
'perfect-scrollbar',
'axios',
'css-loader',
'style-loader',
'vue-loader'
], 'js/vendor.js');
//mix.compress();
|
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
POMXARK
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
the library is very dependent on optimization
I was able to optimize my code to a few kilobytes and now it takes about a second to load the render, I'm sure it can be better