繁体   English   中英

通过单击 highcharts 清除图表

[英]Clear chart by click in highcharts

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

问题是:是否可以在 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/

提前致谢

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

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM