Re: [PR] Fix stacked areas overflow on null values when connectNulls is true [echarts]

Fri, 10 May 2024 04:52:22 -0700 


visakadev commented on PR #19602:
URL: https://github.com/apache/echarts/pull/19602#issuecomment-2104475038

   > > addressed areas stacking when connectNulls is enabled
   > 
   > I think _connectNulls_ should not be enabled in stacked area charts since 
it makes ECharts display fake totals.
   > 
   > Here are the two methods of data preprocessing - approximate or remove 
missing values, [Demo 
Code](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=G4QwTgBAHgglCWBnAIiALiCBeCBtAugNwBQokAJuiAIzZ5GngSUYBMdBJZzVAzBw24sQAFgFcmwgKzjGFKgDZZAMwD2kABTd4dAAyEIOgDwRq-wwGoLASggBvYhGhwkqDADoADgFdEACw0AckBvH0A7t0CIC0NrEidhai9fAI0AWgBZdD93MBAAO3JVAFsNWxSIXXdWa3c0VQAxeCgAU3INXmsYxx42RP8NDQy0LJz8opLI8vd2mvrGlraO2O6QXl7kweG8guLbKIqqmYbm1vbOuKoRNf70zOytsdLJg9qj-dOl6SvUjbvRnYgyvtqi85idFl1hAovj8RttxntKsDZscFp0AL7EAD0mIgiCaaAghSQiHguQA5hBQAAbbxNRDEeK4KT4bCBFKBAxOBlUVhMllYNkc7kYXh81nskjCERigUS4UgKQywWSxRKuWYgBUWJxYCahVUwCahOJpIp1Np9Pi7kQnip8AAxk0NFIADTUTrCVjW20Op2u90qkXeu2O51uj0XYO-sMB-VSKOh_0RjBQm0hv3hkiwBAoKgJjOxjWY7UQdQQECeTxgVQIQroI1ExAk8mUkA0uny2g4K11zwaABy3kKACMmmBkyB2N2ee5ewOh6Px4GVnRhKs54OR2OJ2JpxhLhuF9vlzI9wrZxX51ul_KlGeoYfr51bzKIJvF_0NJDcCIWVFvwo-C2DizzIm84LSK-75jp-kG_hMkGAcBECga8YI7lBR5gLBFw_n-yzSkhEAgUiaGosuorMnQ0HYf0a54QhfC4ERJGHKC5HyryVE4DROFsAx_48sxQHEShpHse8naYdef
 
E0AJyzUMJyGoRJ4JyIYaB6gAymgACeVJGjgdgQLk6h1lSABc9hdHauRNDp-lNFZxkAO7wOQQxWewaIul04BNCADkGc5aIQBiaIkOpqieGg8CqLkdAOE4Blkk0-TOQZyhoFZgQKLoACkgQ-RAsVoMF9iaVA2UQIEFZVjW8B1ppEBqJAYRSEVvlOLUqhUsONbOV0TjKAFaDeLqg1OFNhIgGSDoACq6Z4TnWdN016ctVm4IEtlNIELo1cO4D7TViAYPaADWJ2BLFBnkIE-BDVNGLTS9YVdSVqi9bFniTVNaBgPAZKpWAOUgDm-1PZ4qgkrF8VWco3i5PacMJRo0OkmgthJWtupjWACW4BjuRoLguj4AdgRmIVDCvR9Tjg0gAAKqiY2Of3rUtK07aSe1PW9PldNmSAc8sVnC7mGD0xA_VI5QYC6QA4hWCNtni0tpvAaAwLqICi04_iqC5VkA7S_NdILTi6S4iDOU4lvLAAWl9hRbcZG3c6SJLkHtYUQBTXR4oDdJbU9OPTbkICFNzu2Q2tJVczlsfSwb50XWDVJUnHa2ILpI69Vp8AAF4rWYKdiwp5da9penldXhRBU05eIPqqieSVYC0uXjv2vFdko4Ome2x3Zt02HT1OJH0dJ7zrDZ5zm01cnE-4mnGdZ83ef9VShcl1ZZcr8IVmelXmkN7XK31435fYr3uT92gg9UsPptNyvLdfe3r_89L4dTdiU9uYWDvg_J-ttX7z3-onJevNIGpxAJddecDcRbwLsXUuuhy5H2WLwU-NdHJWSvhfcuVIQCjksvYXEfgjYm07kaB201b59yaAPbwQ9aFd3fq3L-dCf7j3jgAqO3MUggJYY_Nhz8LLKDVntcuHsZ52WQWdBB6captg3u_VBO90H70wYfKgx8Lh4PPgQjS-CDIkLIU0ChxlDbGxHvQ8uojWHsJajI5u3C_AcKaHw6af8nCCOnjVERzCXGSIgXI6BPNFHNzXmozOSitG7wwVggx
 
yxXQryIaYrJFiV6kPIXbOx3j3oryYffMRYDvEeM_l4hxvipr-OIpiQBOVgGhPEew6Rz9ZEr3kTAmJ784m1QSZvfO2i96mD0fHbBkJjGN0IWfa-eSrE2KoTQhxJT47OI6ZItx3Tqlt1qd_V6XRHoRSAA)
 The developer would choose which one is more appropriate, or a combination of 
the two.
   > 
   > 
![image](https://private-user-images.githubusercontent.com/13038071/304649033-f7e95c0f-ffe2-41aa-bf93-8a54e0607095.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTUzMzM4MjgsIm5iZiI6MTcxNTMzMzUyOCwicGF0aCI6Ii8xMzAzODA3MS8zMDQ2NDkwMzMtZjdlOTVjMGYtZmZlMi00MWFhLWJmOTMtOGE1NGUwNjA3MDk1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTEwVDA5MzIwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJhNTMxNTUxZjBmNjA5ZjFlZGI5OWMwZjVmNzUyNTMzYTM1Y2I1ZDNhMmQ0MjgyZDljODA2YTg3MjFmY2ZlYjkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.WrUQx9p9AJGwQ4bjY1EL6KzBFGI1Ljc_k-M5mPMEQ7M)
 
![image](https://private-user-images.githubusercontent.com/13038071/304649436-c3023758-eec9-49ca-b477-bcf2f4454831.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJp
 
c3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTUzMzM4MjgsIm5iZiI6MTcxNTMzMzUyOCwicGF0aCI6Ii8xMzAzODA3MS8zMDQ2NDk0MzYtYzMwMjM3NTgtZWVjOS00OWNhLWI0NzctYmNmMmY0NDU0ODMxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTEwVDA5MzIwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI1NGI5ODcxOWZjNWMwZDM4NmQwMmQ1ZmNjMzUyZDllODI0MDVkZGE5NTkyMjI5ZmVmM2U5N2QwZjdkZmNiMWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.NDiXFzCxEIYfNU5kctijRpBWqlwyjbLpmV6h6XZFnNk)
   
   ### approximate solution fixed my problem: 💯 
   The data preprocessing - **approximate solution fixed** my problem: 
   
   In my case, when rendering the area range (minimum value, maximum value), 
and latest, I used the solution shown in the code before and applied a function 
to approximate the values.
   
   Before: 👎 
   
![image](https://github.com/apache/echarts/assets/167757357/73435596-7674-4132-a983-097507519082)
   
   **After approximate null values** 👍 
   
![image](https://github.com/apache/echarts/assets/167757357/050a5ec4-1b7d-4fa9-99df-e4b67b7a73e9)
   
   I added a custom tooltip to render the original value instead of the 
approximate value.
   
![image](https://github.com/apache/echarts/assets/167757357/60c7ee55-fd54-4d30-b9dd-7712f964a17b)
   
![image](https://github.com/apache/echarts/assets/167757357/c23d94f8-7256-4c09-ac12-bb7dcfa23f9e)
   
   <img width="921" alt="image" 
src="https://github.com/apache/echarts/assets/167757357/baf21e8b-2e81-4756-8a02-bacbea4dc7c8";>
   `function replaceNullsWithApproximate(data) {
       let startIndex = null;
       let approximateValue = null;
   
       for (let i = 0; i < data.length; i++) {
         if (data[i] !== null && !isNaN(parseFloat(data[i]))) {
           const value = parseFloat(data[i]);
           if (startIndex !== null && !isNaN(approximateValue)) {
             const endValue = value;
             const slope = (endValue - approximateValue) / (i - startIndex);
             for (let j = startIndex + 1; j < i; j++) {
               const approximate = approximateValue + slope * (j - startIndex);
               data[j] = Number(approximate.toFixed(3));
             }
           }
           startIndex = i;
           approximateValue = value;
         }
       }
   
       return data;
     }`
   
   
   


-- 
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]

Reply via email to