zhouxin860114 commented on issue #10745: How create the timeline with train 
status on travel?
URL: 
https://github.com/apache/incubator-echarts/issues/10745#issuecomment-508406900
 
 
   > > ```js
   > > colorStops: [{
   > >                         offset: 0, color: 'green' // color at 0% position
   > >                     }, {
   > >                         offset: 0.1, color: 'green' // color at 10% 
position
   > >                     }, {
   > >                         offset: 0.10000001, color: 'grey' // color at 
100% position
   > >                     }]
   > > ```
   > 
   > This not working :( Isn't possible set color dynamic not by offset?? 
because the dates is dynamic and i would set color green from 2002 to 2006 or 
2008....
   
   
   
![image](https://user-images.githubusercontent.com/8022228/60654029-c1246800-9e7d-11e9-8bbd-6a3b86a3dcfe.png)
   It working well here ...
   https://gallery.echartsjs.com/editor.html?c=xwsyY9DhLb&v=2
   
   ``currentIndex = 2; // 0, 1, 2, 3, ....
   len = 9; // len = option.baseOption.timeline.data.length
   
   option = {
       baseOption: {
           timeline: {
               axisType: 'category',
               top: 'auto',
               currentIndex: currentIndex, // 'currentIndex: 2' -> 
'currentIndex: currentIndex' 
               controlStyle: {
                   show: false
               },
               data: [
                   '2002-01-01', '2003-01-01', '2004-01-01',
                   {
                       value: '2005-01-01',
                       symbol: 'diamond',
                       symbolSize: 16
                   },
                   '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', 
'2010-01-01',
                   {
                       value: '2011-01-01',
                       symbol: 'diamond',
                       symbolSize: 18
                   },
               ],
               label: {
                   formatter: function(s) {
                       return (new Date(s)).getFullYear();
                   },
                   position: 'top',
                   rotate: 90,
                   padding: -10
               },
               lineStyle: {
                   width: 5,  //  I am nearsighted ...  
                   color: {
                       type: 'linear',
                       colorStops: [{
                           offset: currentIndex / len,
                           color: 'green' // color at position < (currentIndex 
/ len)
                       }, {
                           offset: currentIndex / len,
                           color: 'grey' // color at position > (currentIndex / 
len) 
                       }]
                   }
               }
           }
       }
   };
   
   myChart.on('timelinechanged', function(params) {
       option.baseOption.timeline.currentIndex = params.currentIndex;
       option.baseOption.timeline.lineStyle.color.colorStops[0].offset = 
params.currentIndex / (option.baseOption.timeline.data.length - 1);
       option.baseOption.timeline.lineStyle.color.colorStops[1].offset = 
params.currentIndex / (option.baseOption.timeline.data.length - 1);
       myChart.setOption(option);
   });``

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to