代码之家  ›  专栏  ›  技术社区  ›  patL grad student

highcharter自定义动画

  •  0
  • patL grad student  · 技术社区  · 6 年前

    我正在尝试使用添加自定义动画 highcharter 像这样的包装 example 我用的是极坐标图。

    我可以用 JS ,但我无法转换动画函数(从 ease 存储库)到 高级宪章 .

    这是我的 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
          };
        }")
      )
    

    谢谢您!

    1 回复  |  直到 6 年前
        1
  •  1
  •   daniel_s    6 年前

    动画不起作用,因为你在附加的代码中有一点输入错误。请看一下:

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

    animation animatio . 请纠正它,然后动画应该出现。