有光泽的热图 Highcharts

Question

有没有办法使用 highcharts 为热图添加光面处理，使其看起来不那么二维。

这是我希望添加饰面的一种热图示例：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/

我猜这将是对以下内容的补充：

plotOptions:{
   heatmap:{
      color: {}
   }
}

但在热图中，颜色各不相同，因此我无法对其施加通用渐变。

Answer 1

您可以更改颜色在 colorAxis 中的计算方式，例如包装 tweenColors 方法并应用渐变：

  (function(H) {
    H.wrap(H.ColorAxis.prototype, 'tweenColors', function(p, from, to, pos) {
      var ret = p.call(this, from, to, pos);

      return {
        radialGradient: {
          cx: 0.1,
          cy: 0.1,
          r: 0.7
        },
        stops: [
          [0, ret],
          [1, Highcharts.Color(ret).brighten(0.2).get('rgb')]
        ]
      }
    });
  })(Highcharts);

演示：http://jsfiddle.net/nkukv1g4/2/

有光泽的热图 Highcharts

Glossy Heatmap Highcharts

javascript

heatmap

highcharts