Question

在我的R闪亮应用程序的海图图中，需要等待一段时间才能显示系列工具提示，即我希望工具提示在显示之前要等待一段时间，而不是在鼠标悬停元素时立即显示。

对此问题有解决方案吗？在此先感谢：）

library("shiny")
library("highcharter")



ui <- fluidPage(
  h1("Highcharter Example"),
  fluidRow(
    column(width = 8,
           highchartOutput("hchart",height = "500px")
    )
  )
)



server <- function(input, output) {
  output$hchart <- renderHighchart({
    hc <-  highchart() %>% 
      hc_chart(type = "area", plotBorderWidth = 0.5) %>% 
      hc_xAxis(lineWidth = 1, gridLineWidth = 0, minorGridLineWidth = 0, labels = list(format = '{value}%')) %>%
      hc_add_series(name = 'Dummy', data = list(list(y = 4, z = 2), list(y = 5, z = 0), list(y = 6, z = 1), list(y = 7, z = 1), list(y = 8, z = 1))) %>%
      hc_plotOptions(line = list(
        dataLabels = list(enabled = TRUE),
        enableMouseTracking = TRUE
      )
      )
    return(hc)
  })
} 

shinyApp(ui = ui, server = server)

Answer 1

我遇到了这个示例http://rudovjan.github.io/highcharts-tooltip-delay/，我们可以用它来解决您的问题。我们将delayForDisplay设置为2秒。作为参考，我也将在此发布JS脚本，以防万一他删除了该脚本

rm(list = ls())
library("shiny")
library("highcharter")

ui <- fluidPage(
  h1("Highcharter Example"),
  fluidRow(
    tags$script(src="http://rudovjan.github.io/highcharts-tooltip-delay/tooltip-delay.js"),
    column(width = 8,
           highchartOutput("hchart",height = "500px")
    )
  )
)

server <- function(input, output) {
  output$hchart <- renderHighchart({
    hc <-  highchart() %>% 
      hc_chart(type = "area", plotBorderWidth = 0.5) %>% 
      hc_xAxis(lineWidth = 1, gridLineWidth = 0, minorGridLineWidth = 0, labels = list(format = '{value}%')) %>%
      hc_add_series(name = 'Dummy', data = list(list(y = 4, z = 2), list(y = 5, z = 0), list(y = 6, z = 1), list(y = 7, z = 1), list(y = 8, z = 1))) %>%
      hc_plotOptions(line = list(
        dataLabels = list(enabled = TRUE),
        enableMouseTracking = TRUE
      )
      )
    hc <- hc_tooltip(hc,useHTML = T,delayForDisplay = 2000,hideDelay= 1)

    return(hc)
  })
} 

shinyApp(ui = ui, server = server)

(function(H) {

  let timerId = {};

  const generatePointsUniqueKey = (points) => {

    const generatePointKey = (point) => {
      return point.category + " " + point.series.name + ": " + point.x + " " + point.y;
    };

    const result = points.map(generatePointKey).join(', ');

    return result;
  }

  H.wrap(H.Tooltip.prototype, 'refresh', function(proceed) {
      let seriesName;

      if (Array.isArray(arguments[ 1 ])) {
        // Can be array in case that, it's shared tooltip
        seriesName = generatePointsUniqueKey(arguments[ 1 ]);
      } else {
        seriesName = arguments[ 1 ].series.name;
      }

      const delayForDisplay = this.chart.options.tooltip.delayForDisplay ? this.chart.options.tooltip.delayForDisplay : 1000;

      if (timerId[ seriesName ]) {
        clearTimeout(timerId[ seriesName ]);
        delete timerId[ seriesName ];
      }

      timerId[ seriesName ] = window.setTimeout(function() {
        let pointOrPoints = this.refreshArguments[ 0 ];

        if (pointOrPoints === this.chart.hoverPoint || $.inArray(this.chart.hoverPoint, pointOrPoints) > -1) {
          proceed.apply(this.tooltip, this.refreshArguments);
        }

      }.bind({
        refreshArguments: Array.prototype.slice.call(arguments, 1),
        chart: this.chart,
        tooltip: this
      }), delayForDisplay);

  });

}(Highcharts));

R闪亮-高图：显示之前的工具提示延迟

1 个答案: