在HighCharts中，如何通过缩放获得固定的颜色渐变？

我想要得到一个如下所示的颜色渐变：值0 =绿色，值20 =黄色，值40 =红色。所以我使用了2或3次停止线性渐变，这取决于我的实际数据最大是否超过20。这是我能够通过HSL类型颜色空间移动线性渐变的唯一方法。它效果很好。问题是当我缩放时，lineargradient被重新应用到一个可能更小的规模。我希望黄色始终以20的值为中心，并有任何可能的缩放场景。现在，当我缩放时，黄色可能会以更小的值为中心。任何想法如何做到这一点？每次发生缩放时，是否必须更改渐变？以下是代码：在HighCharts中，如何通过缩放获得固定的颜色渐变？

var data=env.client.data; 
    var selected=env.client.selected; 

    var max=_.max(data,function(slice){ 
    return(slice[1]); 
    })[1]; 

    if(max>0){ 
    var stops=[ 
     [0,'hsla(120,50%,50%,0.5)'] 
    ]; 

    if(max>20){ 
     stops.push([20/max,'hsla(60,50%,50%,0.5)']); 
     stops.push([1,'hsla('+Math.round(120-(120*(max/40)))+',50%,50%,0.5)']); 
    }else{ 
     stops.push([1,'hsla('+Math.round(120-(60*(max/20)))+',50%,50%,0.5)']); 
    } 

    var chart=new Highcharts.Chart({ 
     chart:{ 
     height:250, 
     renderTo:'chart', 
     type:'areaspline', 
     width:960, 
     zoomType:'x' 
     }, 
     legend:{ 
     enabled:false 
     }, 
     plotOptions:{ 
     areaspline:{ 
      animation:false, 
      fillColor:{ 
      linearGradient:{ 
       x1:0, 
       y1:1, 
       x2:0, 
       y2:0 
      }, 
      stops:stops 
      }, 
      lineColor:'black', 
      lineWidth:1, 
      marker:{ 
      enabled:false, 
      states:{ 
       hover:{ 
       enabled:true, 
       radius:5 
       } 
      } 
      }, 
      point:{ 
      events:{ 
       click:function(){ 
       var point=moment(this.x).utc(); 
       env.client.range.selected=point; 
       $('#client-datetime').val(point.format('YYYY MMM DD, HH:mm')); 
       _.publish('client date changed'); 
       } 
      } 
      }, 
      states:{ 
      hover:{ 
       lineWidth:1 
      } 
      } 
     } 
     }, 
     series:[{ 
     data:data, 
     name:'Clients' 
     }], 
     title:{ 
     text:null 
     }, 
     tooltip:{ 
     animation:false 
     }, 
     xAxis:{ 
     maxZoom:12*60*60*1000, 
     title:{ 
      text:null 
     }, 
     type:'datetime' 
     }, 
     yAxis:{ 
     max:max, 
     min:0, 
     minTickInterval:1, 
     title:{ 
      text:null 
     } 
     } 
    }); 
    }else{ 
    $('#chart').html(''); 
    }

来源

2012-11-06 Douglas Mauch

找出问题所在。显然，如果数据集大于300点，缩放视图仅使用最近的300个点并重绘，这会影响渐变效果。幸运的是，这个大小可以通过cropThreshold参数调整。我只是将其设置为我的数据集（2017年）的大小，它运行得很好，虽然速度稍慢，因为它仍然呈现所有数据点，但其中大多数可能不在可视区域内，效率低下，除了它保持我的渐变。

来源

2012-11-07 16:43:36

在HighCharts中，如何通过缩放获得固定的颜色渐变？

回答

相关问题