Глянцевая тепловая карта Highcharts

Есть ли способ добавить глянцевую поверхность на тепловую карту, используя highcharts, чтобы она выглядела менее двухмерной.

Вот пример типа тепловой карты, к которой я хотел бы добавить отделку:

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

Я предполагаю, что это будет дополнением к:

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

Но на тепловой карте цвета различаются, поэтому я не могу наложить на нее общий градиент.


javascript highcharts heatmap
person ilyaU    schedule 22.02.2016    source источник
comment
1) не как стандартный вариант 2) для чего? Подобные эффекты просто отвлекают и выглядят глупо для тех, кто действительно хочет что-то узнать из данных.   -  person jlbriggs    schedule 22.02.2016
comment
Я неправильно понял вопрос. Один из вариантов — использовать некоторый эффект textShadow на метках данных.   -  person Nishith Kant Chaturvedi    schedule 22.02.2016
comment
Цель состояла в том, чтобы заставить его выглядеть 3D. Затенение не делает его трехмерным, оно просто выглядит странно. Идея состоит в том, чтобы сделать его популярным. Это было бы больше для аудитории конечных пользователей, где понимание данных и хорошая отделка будут одинаково важны.   -  person ilyaU    schedule 22.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете изменить способ вычисления цвета в 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/

person Paweł Fus    schedule 23.02.2016