Пользовательская анимация

Question

Я пытаюсь добавить пользовательскую анимацию, используя highcharter Пакет R, как в этом примере, где я использую полярную диаграмму.

Я могу сделать это с помощью JS, но я не могу перевести функцию анимации (из легкого хранилища) в highcharter,

Вот мой R код:

# I've tried to created a function using `JS`:

easeOutBounce  <- JS("function (pos) {
  if ((pos) < (1 / 2.75)) {
    return (7.5625 * pos * pos);
  }
  if (pos < (2 / 2.75)) {
    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
  }
  if (pos < (2.5 / 2.75)) {
    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
  }
  return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
}")

library(tidyverse)
library(highcharter)

highchart() %>% 
  hc_chart(polar = T, type = "bar",
           events = list(
             render = JS("function() {
                        var chart = this,
                         middleElement = chart.middleElement;

                         if (middleElement) {
                         middleElement.destroy();
                         }

                         chart.middleElement = chart.renderer.circle(chart.plotSizeX / 2 + chart.plotLeft, chart.plotHeight / 2 + chart.plotTop, 20).attr({
                         zIndex: 3,
                         fill: '#ffffff'
                         }).add();
                         }")
           )
             ) %>% 
  hc_title(text = "Athlete 1 vs Athlete 2") %>% 
  hc_xAxis(categories = c("Total Score", "Avg. Score", "Sum Score",
                          "Best Score"),
           tickmarkPlacement = "on",
           plotLines = list(
             list(label = list(
               rotation = 90))
           )
  ) %>% 
  hc_yAxis(offset = 30) %>% 
  hc_series(
    list(
      pointPadding = 0,
      groupPadding = 0,
      name = "Athlete 1",
      animatio = list(
        duration = 1000,
        easing = easeOutBounce
      ),
      data = c(43000, 19000, 60000, 35000)
    ),
    list(
      pointPadding = 0,
      groupPadding = 0,
      name = "Athlete 2",
      data = c(50000, 39000, 42000, 31000)
    )
  ) %>% 
  hc_colors(c("firebrick", "steelblue")) %>% 
  hc_tooltip(
    borderWidth = 0,
    backgroundColor = 'none',
    shadow = FALSE,
    style = list(
      fontSize = '16px'
    ),
    headerFormat = '',
    pointFormatter = JS("function() {
      return this.y / 1000 + 'k'
    }"),
    positioner = JS("function(labelWidth, labelHeight) {
      return {
        x: (this.chart.plotSizeX - labelWidth) / 2 + this.chart.plotLeft,
        y: (this.chart.plotSizeY - labelHeight) / 2 + this.chart.plotTop
      };
    }")
  )

Спасибо!

Answer 1

Анимация не работает, потому что у вас есть небольшая опечатка в прикрепленном коде. Пожалуйста, посмотрите на это:

animatio = list(
    duration = 1000,
    easing = easeOutBounce
),

Должно быть animationне animatio, Пожалуйста, исправьте это, тогда должна появиться анимация.