1

我正在尝试获得如下所示的颜色渐变：值 0 = 绿色，值 20 = 黄色，值 40 = 红色。因此，我使用具有 2 或 3 个停止的线性梯度，具体取决于我的实际数据最大值是否超过 20。这是我可以让线性渐变在 HSL 类型颜色空间中移动的唯一方法。它工作得很好。问题是当我缩放时，线性渐变被重新应用到可能更小的比例。我希望黄色始终以 20 为中心，具有任何可能的缩放场景。现在，当我缩放时，黄色可能以一个小得多的值为中心。知道如何做到这一点吗？每次缩放时都必须更改渐变吗？这是代码：

  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('');
  }
4

1 回答 1

0

想通了这个问题。显然，如果数据集大于 300 点，则缩放视图仅使用最近的 300 点并重新绘制，从而影响渐变效果。幸运的是，这个大小可以通过cropThreshold 参数进行调整。我只是将它设置为我的数据集（2017）的大小，它工作得很好，虽然有点慢，因为它仍在渲染所有数据点，但它们中的大多数可能在可视区域之外，这是低效的，除了它保持我的渐变。

于 2012-11-07T16:43:36.177 回答