Question

我正在尝试使用highcharter R包添加自定义动画，就像在此example中使用极坐标图一样。

我可以使用JS来执行此操作，但是我无法将动画功能（从ease存储库转换为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。请更正它，然后应显示动画。

highcharter自定义动画

1 个答案: