phutoan31299 opened a new issue, #19511: URL: https://github.com/apache/echarts/issues/19511
### Version xxx ### Link to Minimal Reproduction https://jsfiddle.net/k9Lurmog/ ### Steps to Reproduce Hi all, I am having problem with Box-Plot. My Problem: I can't define xAxis following ```categories_date``` variable. My Expectation: x-Axis will be like ```'2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05'```  *I'm so sorry due to creating issue in here, but i can't find any template to question and I can't find any way to solve this problem. Thank you so much* Below is my code (eCharts plugins in Grafana) ``` let categories_date = ['2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07']; // Create an object to store variables dynamically let variableObject = {}; // Assign values to dynamically created variables with underscores instead of hyphens categories_date.forEach((date, index) => { // Replace hyphens with underscores in variable names let variableName = 'var_' + date.replace(/-/g, '_'); // Generate a random array for each variable let randomArray = Array.from({ length: 100 }, () => Math.random() * 100); // Assign the random array to the variable variableObject[variableName] = randomArray; }); // // Now you can access and display the variables and their arrays // for (const variableName in variableObject) { // console.log(`${variableName}:`, variableObject[variableName]); // } // Map the values based on the dynamic variables let mapArr = categories_date.map(date => variableObject['var_' + date.replace(/-/g, '_')]); // Clean the array of arrays const cleanArrayOfArrays = mapArr.map(innerArray => innerArray.filter(element => element !== undefined)); return { title: { text: 'Box-Plot Comparison for CTQ Control', left: 'left' }, dataset: [ { source: cleanArrayOfArrays, dimensions: categories_date.map(date => ({ name: date, type: 'ordinal' })) }, { source: cleanArrayOfArrays, dimensions: categories_date.map(date => ({ name: date, type: 'ordinal' })) }, { fromDatasetIndex: 0, transform: { type: 'boxplot', config: { itemNameFormatter: function (params) { return scopes[params.value]; } } } }, { fromDatasetIndex: 1, transform: { type: 'boxplot', config: { itemNameFormatter: function (params) { return scopes[params.value]; } } } } ], legend: { top: '10%' }, tooltip: { trigger: 'item', axisPointer: { type: 'shadow' } }, grid: { left: '5%', top: '20%', right: '10%', bottom: '15%' }, xAxis: { type: 'category', // data: categories_date, boundaryGap: true, nameGap: 30, splitArea: { show: true }, splitLine: { show: false } }, yAxis: { type: 'value', name: 'Value', // min: 1.2, // max: 1.3, splitArea: { show: false } }, dataZoom: [ { type: 'inside', start: 0, end: 20 }, { show: true, type: 'slider', top: '90%', xAxisIndex: [0], start: 0, end: 20 } ], series: [ { name: 'Vietnam', type: 'boxplot', datasetIndex: 2 // datasetId: 2 }, { name: 'Gumi', type: 'boxplot', datasetIndex: 3 // datasetId: 3 } ] }; ``` ### Current Behavior none ### Expected Behavior none ### Environment _No response_ ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
