Question

我想获得一个如下所示的颜色渐变：值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('');
  }

Answer 1

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

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

1 个答案: