1

次のようなカラーグラデーションを取得しようとしています：値0 =緑、値20 =黄色、値40=赤。したがって、実際のデータの最大値が20を超えるかどうかに応じて、2または3ストップの線形勾配を使用しています。これが、線形勾配を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 に答える