[GitHub] [echarts] throrin19 commented on issue #14924: Possibility to create Horizon charts

[GitBox <gi...@apache.org>]

throrin19 commented on issue #14924:
URL: https://github.com/apache/echarts/issues/14924#issuecomment-1160398865

   After research, It's not simply to create this using the `renderItem` function. I found only examples using `rect`. In this case I want to use `line` with area to draw my lines.
   
   I used this article to understand how Horizon works : https://bernatgel.github.io/karyoploter_tutorial/Tutorial/PlotHorizon/PlotHorizon.html
   
   I test to cut my serie in 3 positive/negative parts. It works fine if I want to show them in different serie. But in the case they are in the same serie, it's very complicated to do that.
   
   Any help or example to do that ? 
   
   For now This is my tests :  
   
   ```js
   let base = +new Date(1988, 9, 3);
   let oneDay = 24 * 3600 * 1000;
   let data = [[base, Math.random() * 300]];
   for (let i = 1; i < 20000; i++) {
     let now = new Date((base += oneDay));
     data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
   }
   
   // test horizon part 
   const max = Math.max(...data.map(i => i[1]));
   const min = Math.min(...data.map(i => i[1]));
   const moreDelta = Math.max(Math.abs(max), Math.abs(min));
   const sectionSize = moreDelta / 3;
   const horizonSeries = {
     max3 : [],
     max2 : [],
     max1 : [],
     min1 : [],
     min2 : [],
     min3 : [],
   };
   
   data.forEach(item => {
     let palier = Math.floor(Math.abs(item[1]) / sectionSize);
     let section;
     
     if (palier >= 3) {
       palier = 2;
     }
     
     
   
     if (item[1] < 0) {
       section = `min${palier+1}`;
     } else {
       section = `max${palier+1}`;
     }
     
     horizonSeries[section].push([item[0], Math.abs(item[1])]);
     
     const sections = Object.keys(horizonSeries);
     
     sections.forEach(sectionName => {
       if (sectionName !== section) {
         horizonSeries[sectionName].push([item[0], null]);
       }
     })
   }); 
   
   console.log(max, min, moreDelta, sectionSize, horizonSeries);
   
   
   option = {
     tooltip: {
       trigger: 'axis',
       position: function (pt) {
         return [pt[0], '10%'];
       }
     },
     title: {
       left: 'center',
       text: 'Large Ara Chart'
     },
     toolbox: {
       feature: {
         dataZoom: {
           yAxisIndex: 'none'
         },
         restore: {},
         saveAsImage: {}
       }
     },
     xAxis: {
       type: 'time',
       boundaryGap: false
     },
     yAxis: {
       type: 'value',
       boundaryGap: [0, '100%']
     },
     dataZoom: [
       {
         type: 'inside',
         start: 0,
         end: 20
       },
       {
         start: 0,
         end: 20
       }
     ],
     series: [
       // {
       //   name: 'Fake Data',
       //   type: 'line',
       //   smooth: true,
       //   symbol: 'none',
       //   areaStyle: {},
       //   data: data
       // }
       {
         name : 'max3',
         type : 'line',
         symbol: 'none',
         areaStyle: {},
         data : horizonSeries.max3,
       },
       {
         name : 'max2',
         type : 'line',
         symbol: 'none',
         areaStyle: {},
         data : horizonSeries.max2,
       },
       {
         name : 'max1',
         type : 'line',
         symbol: 'none',
         areaStyle: {},
         data : horizonSeries.max1,
       },
       {
         name : 'min1',
         type : 'line',
         symbol: 'none',areaStyle: {},
         data : horizonSeries.min1,
       },
       {
         name : 'min2',
         type : 'line',
         symbol: 'none',
         areaStyle: {},
         data : horizonSeries.min2,
       },
       {
         name : 'min3',
         type : 'line',
         symbol: 'none',
         areaStyle: {},
         data : horizonSeries.min3,
       }
     ]
   };
   ```
   
   And this is the render :  
   
   ![image](https://user-images.githubusercontent.com/1394778/174603531-59edc1a1-01e0-421e-822c-94790d050913.png)
   


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org