Вопросы Теги

Как анимировать условные обозначения условных обозначений при наведении курсора?

>>> tmp = [ i.append(7) for i in _lst ]
>>> print _lst
[[1, 2, 7], [3, 4, 7], [5, 6, 7]]
0
задан prashant rana 17 January 2019 в 08:23
поделиться

2 ответа

Вы также можете обернуть метод drawLegendSymbol в круговой прототип и визуализировать все, что хотите, без каких-либо ограничений. Вам понадобятся те же события и методы, которые предлагает @ppotaczek. 

(function(H) {
  H.wrap(H.seriesTypes.pie.prototype, 'drawLegendSymbol', function(proceed, legend, item) {
var options = legend.options,
  symbolHeight = legend.symbolHeight,
  square = options.squareSymbol,
  symbolWidth = square ? symbolHeight : legend.symbolWidth;
var series = this;
var halo;

item.legendSymbol = series.chart.renderer.rect(
    square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
    legend.baseline - symbolHeight + 1, // #3988
    symbolWidth,
    symbolHeight,
    H.pick(legend.options.symbolRadius, symbolHeight / 2)
  )
  .addClass('highcharts-point')
  .attr({
    zIndex: 4
  }).add(item.legendGroup);

H.addEvent(item.legendItem.element, 'mouseover', function() {

  halo = series.chart.renderer.rect(
      square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
      legend.baseline - symbolHeight + 1, // #3988
      symbolWidth,
      symbolHeight,
      H.pick(legend.options.symbolRadius, symbolHeight / 2)
    )
    .addClass('highcharts-point')
    .attr({
      fill: item.color,
      'fill-opacity': 0.25,
      zIndex: 1
    })
    .add(item.legendGroup);

    halo.animate({
      width: symbolWidth * 1.8,
      height: symbolHeight * 1.8,
      translateX: -symbolWidth * 0.4,
      translateY: -symbolHeight * 0.4,
      r: H.pick(legend.options.symbolRadius, symbolHeight / 2 + symbolHeight * 0.4)
    }, 0);
  });

  H.addEvent(item.legendItem.element, 'mouseout', function() {
    halo.animate({
      width: symbolWidth,
      height: symbolHeight,
      translateX: 0,
      translateY: 0,
      r: 0
    });
  });
})
})(Highcharts)

jsFiddle: https://jsfiddle.net/BlackLabel/5beq3psn/

0
ответ дан raf18seb 17 January 2019 в 08:23
поделиться

Вам необходимо добавить события mouseover и mouseout к элементам легенды и использовать метод aniamte для элемента символа легенды в функции обратного вызова событий: 

var H = Highcharts,
    chart = Highcharts.chart('container', {
        series: [{
            type: 'pie',
            showInLegend: true,
            data: [12, 15, 25]
        }]
    }),

    legendItems = chart.legend.allItems;

legendItems.forEach(function(item) {
    H.addEvent(item.legendGroup.element, 'mouseover', function() {
        item.legendSymbol.animate({
            width: 24,
            height: 24,
            translateX: -6,
            translateY: -6
        });
    });

    H.addEvent(item.legendGroup.element, 'mouseout', function() {
        item.legendSymbol.animate({
            width: 12,
            height: 12,
            translateX: 0,
            translateY: 0
        });
    });
});

Живая демонстрация: http://jsfiddle.net/BlackLabel/a0s9yhtd/

Справочник по API:

https://api.highcharts.com/class-reference/Highcharts#. animate

https://api.highcharts.com/class-reference/Highcharts#.addEvent

0
ответ дан ppotaczek 17 January 2019 в 08:23
поделиться
Другие вопросы по тегам:

Похожие вопросы: