【问题标题】:Clear chart by click in highcharts通过点击highcharts清除图表
【发布时间】:2020-04-11 00:16:50
【问题描述】:

我为我的英语道歉,我希望一切都清楚。

问题是:是否可以在highcharts中制作,这样当你点击图表时,所有系列的选择都会被重置。

现在更详细。我使用 R 语言包 rCharts 完成了图表。

r图表:

library(rCharts)

HideOtherSeriesOnClick <- function() {
  "#! function(event) {
   var selected = this.index;

   $.each(this.chart.series, function(index, series) {
      if (selected != index) {
         if (series.visible) {
            series.setVisible(false, false);
         } else {
            series.setVisible(true, false);
         }
      }
   });
   this.redraw();
   } !#"
}

HideMostSeriesByClickOnField <- function() {
  "#! function () {
   chart = this;
   var count_visibles = 0;

   $.each(chart.series, function(index, series) {
      if (series.visible) {
         count_visibles++;
      }
   });

   if (count_visibles < chart.series.length/2 ) {
      $(chart.series).each(function(){
         this.setVisible(true, false);
      });
      chart.redraw();
   } else {
      $(chart.series).each(function(){
         this.setVisible(false, false);
      });
      chart.redraw();
   }
}!#"
}

df <- data.frame(Wr.Hnd = c(18.5, 18, 19, 20, 21, 23, 4, 7, 5),
                 NW.Hnd = c(10, 12, 14, 9, 15, 12, 20, 23, 25),
                 Clap = rep(c("Right", "Left", "Center"), each = 3),
                 stringsAsFactors = FALSE)
#data <- MASS::survey
h1 <- hPlot(x = "Wr.Hnd", y = "NW.Hnd", data = df, type = "line", group = "Clap")
h1$chart( events = list(click = HideMostSeriesByClickOnField()))
h1$plotOptions(series = list( events = list(click = HideOtherSeriesOnClick())))
h1

图表:

点击绘图后的图表:

图例中点击“左”后的图表:

现在我们正在从 rCharts 迁移到 highcharter,我们希望保留此功能。问题是这些函数是别人写的,我不懂JS。当然,只是复制粘贴是行不通的。所以我的问题是是否有可能在 highcharts 中实现这样的东西,代码应该是什么样子。在这个例子中可以用纯 JS 展示:

https://jsfiddle.net/t2MxW/21971/

提前致谢

【问题讨论】:

  • 也许我解释得不好,抱歉。这个问题与 rCharts 无关,因为在 rCharts 上一切正常,我只是举了一个例子。我需要在 highcharts 上使用相同的功能。

标签: javascript r highcharts r-highcharter


【解决方案1】:

我不确定这是否是您的要求,但我分叉了您的小提琴here

我使用这个在图表上添加了一个事件

chart: {
    renderTo: 'container',
    events: {
        click: function () {
           for(let i = 0; i < chart.series.length; i++){
                chart.series[i].hide();
           }
        }
    }
},

所以基本上在点击时,所有图表系列都被一一隐藏。如果您需要参考,我使用了 highcharts 的文档。

【讨论】:

  • 不,这是一个错误的答案,因为它涉及 Highcharts,而不是 rChart。
  • @raf18seb “现在我们正在从 rCharts 迁移到 highcharter,我们希望保留此功能。”据我了解,OP 想知道如何在 highchart 中实现这一点,并且已经有了 rChart 代码。此外,他还提供了 Highcharts 代码,以进行增强。
  • @VladimirBogomolov,是的,我就是这么问的。非常感谢。
猜你喜欢
  • 2019-12-11
  • 1970-01-01
  • 2012-03-14
  • 1970-01-01
  • 1970-01-01
  • 2023-03-15
  • 2016-04-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多