2017-11-06 6 views
0

ヒートマップを作成しようとしています。最初の列は絶対値のセットで、後続の列はその最初の列からのパーセント変化です。Highchartsヒートマップでは、データ点がカラースケールで無視される可能性がありますか?

これは残念なことに、ヒートマップの色とスケールが歪んでしまいます。私が望んでいるのは、値を最小/最大に歪ませないようにするために設定できるプロパティを見つけることです。別の質問に基づいて

http://jsfiddle.net/hasaki/6rkk66p1/3/

、私はそれが軸を歪曲しません色を指定した場合と思ったが、私のバイオリンは、そうでない場合を示しています。

series: [{ 
    data: [ 
    {x: 0, y: 0, value: 120, color: '#FFFFFF'}, 
    {x: 0, y: 1, value: 130, color: '#FFFFFF'}, 
    {x: 1, y: 0, value: 0.435}, 
    {x: 1, y: 1, value: 0.775}, 
    {x: 2, y: 1, value: 80}, // just to show they are in the middle of the range 
    {x: 2, y: 1, value: 15}, 
    ], 
    dataLabels: { 
    enabled: true, 
    formatter: function() { 
     return `${Math.round(this.point.value * 10)/10} ${this.point.x ? '%' : ''}`; 
    } 
}] 

このヒートマップは、私が勝った大きなチャートアプリケーションの一部である:ここで

は、私は現在、スキュー最小/最大とスキューカラースケールで結果データを、コーディングしようとしている方法です必ず値の領域があまりにも大きく異なる可能性があることを事前に決定する必要があります。私はhighchartsがほとんどの細胞の最小/最大と色を把握することをお勧めしたいと思います。

答えて

0

あなたは、チャートのコンストラクタに渡す前に、このようなあなたのデータを準備することができます

data: (function() { 

     data.forEach(function(p) { 
     if (p.x > 0) { 
      var basePoint = data.find((p_) => p_.x === 0 && p_.y === p.y); 
      p.originalValue = p.value; 
      p.value = p.value * basePoint.value; 
     } 

     }); 
      return data; 

    })() 

私はすべての点の実際の値を計算し、valueプロパティとしてそれを使用しています。私はpercentValueプロパティのパーセントを後でdataLabels.formatterに使用するように保存しました(ツールチップフォーマッタでも同様に使用する必要があります)。

ライブ作業のデモ:http://jsfiddle.net/kkulig/vbgxscgt/

は今、すべての点が同じスケールであり、色の軸が正常に動作します。

+0

これはそうです!可能な限り基本値が色尺度に対して必要な値の範囲内にないので、これを反転する必要がありますが、これは私が気づいていないという事実を明らかにします。フォーマッタで利用可能です。 –

関連する問題