highcharts/highcharter堆叠条形图中的交互式行过滤答案

【问题标题】：Interactive row filtering in highcharts/highcharter stacked barcharthighcharts/highcharter堆叠条形图中的交互式行过滤
【发布时间】：2018-03-06 13:50:14
【问题描述】：

我在网站中使用 highcharts 图表（直接使用 R 中的 highcharter 生成）。我想包括下图，它是用我在下面粘贴的 R 代码创建的。

它看起来很不错，我喜欢将所有案例都放在一个图表中。同时，这也是相当不可读的，所以我希望有一种简单的方法来通过简单的点击来过滤案例，例如只显示大国或小国（这只是一个例子，我包含在相关列下方的数据框，不一定包含准确的数据），或者可能是其他一些标准。

如果能够以某种方式在图例中添加与任何颜色无关的其他类别，那就太好了……所以，图例看起来像：“外国电影”、“国内电影”、“大国” ，“小国家”，并且可以单击其中一个以过滤掉行。

这是我的代码：

library("highcharter")
library("tidyverse")
data <- structure(list(Market = c("TR", "FR", "DK", "IT", "FI", "GB", 
                          "DE", "CZ", "NO", "PL", "SE", "ES", "NL", "LT", "RU", "IE", "BE", 
                          "MK", "IS", "EE", "CH", "GR", "SI", "LV", "HR", "SK", "AT", "CY", 
                          "PT", "HU", "RO", "BG", "GE", "BA", "ME", "LU", "LI", "TR", "FR", 
                          "DK", "IT", "FI", "GB", "DE", "CZ", "NO", "PL", "SE", "ES", "NL", 
                          "LT", "RU", "IE", "BE", "MK", "IS", "EE", "CH", "GR", "SI", "LV", 
                          "HR", "SK", "AT", "CY", "PT", "HU", "RO", "BG", "GE", "BA", "ME", 
                          "LU", "LI"),
               ShareType = structure(c(2L, 2L, 2L, 2L, 2L, 2L, 
                                       2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 
                                       2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 1L, 
                                       1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
                                       1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
                                       1L, 1L, 1L, 1L),
                                     .Label = c("Foreign films", "Domestic films"                                        ), class = "factor"),
               Share = c(56.4231469116968, 39.5431632399628, 
                         29.749523693326, 28.5269121653326, 27.9677825334658, 25.6887519386218, 
                         24.5183688581634, 23.8053084668207, 23.4444297175255, 22.1408227941667, 
                         21.9442142508713, 19.8078462534516, 17.7571013104236, 17.6063964526984, 
                         17.1661554764454, 16.4523079869757, 14.3484355432636, 9.63514220778755, 
                         8.75976247979877, 8.66662103906533, 7.13410891884076, 7.09263418232668, 
                         5.88023165120894, 5.52250260158876, 5.03914297790774, 5.03160117718049, 
                         4.34368469630644, 4.32982731423597, 4.13061558536597, 3.31738241708324, 
                         2.88418649997091, 2.61611677620005, 2.01407803049061, 1.17033479389436, 
                         0.947702322262302, 0.835625773810161, 0, 43.5768530883032, 60.4568367600372, 
                         70.250476306674, 71.4730878346674, 72.0322174665342, 74.3112480613782, 
                         75.4816311418366, 76.1946915331793, 76.5555702824745, 77.8591772058333, 
                         78.0557857491287, 80.1921537465484, 82.2428986895764, 82.3936035473016, 
                         82.8338445235546, 83.5476920130243, 85.6515644567364, 90.3648577922124, 
                         91.2402375202012, 91.3333789609347, 92.8658910811592, 92.9073658176733, 
                         94.1197683487911, 94.4774973984112, 94.9608570220923, 94.9683988228195, 
                         95.6563153036936, 95.670172685764, 95.869384414634, 96.6826175829168, 
                         97.1158135000291, 97.3838832238, 97.9859219695094, 98.8296652061056, 
                         99.0522976777377, 99.1643742261898, 100),
               BigSmall = c("Big", 
                            "Big", "Small", "Big", "Small", "Big", "Big", "Small", "Small", 
                            "Small", "Small", "Big", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Big", "Big", "Small", "Big", "Small", "Big", "Big", "Small", 
                            "Small", "Small", "Small", "Big", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small"),
               Country = c("Turkey", "France", "Denmark", "Italy", 
                           "Finland", "United Kingdom", "Germany", "Czech Republic", "Norway", 
                           "Poland", "Sweden", "Spain", "Netherlands", "Lithuania", "Russian Federation", 
                           "Ireland", "Belgium", "Former Yugoslav Republic of Macedonia", 
                           "Iceland", "Estonia", "Switzerland", "Greece", "Slovenia", "Latvia", 
                           "Croatia", "Slovakia", "Austria", "Cyprus", "Portugal", "Hungary", 
                           "Romania", "Bulgaria", "Georgia", "Bosnia-Herzegovina", "Montenegro", 
                           "Luxembourg", "Liechtenstein", "Turkey", "France", "Denmark", 
                           "Italy", "Finland", "United Kingdom", "Germany", "Czech Republic", 
                           "Norway", "Poland", "Sweden", "Spain", "Netherlands", "Lithuania", 
                           "Russian Federation", "Ireland", "Belgium", "Former Yugoslav Republic of Macedonia",
                           "Iceland", "Estonia", "Switzerland", "Greece", "Slovenia", "Latvia", 
                           "Croatia", "Slovakia", "Austria", "Cyprus", "Portugal", "Hungary", 
                           "Romania", "Bulgaria", "Georgia", "Bosnia-Herzegovina", "Montenegro", 
                           "Luxembourg", "Liechtenstein")), class = c("tbl_df", "tbl", "data.frame"
                           ), row.names = c(NA, -74L), .Names = c("Market", "ShareType", 
                                                                  "Share", "BigSmall", "Country"))

data %>% 
  hchart("bar", hcaes(x = Country, y = Share, group = ShareType), color = c("#dfba47", "#8cbea3")) %>% 
  hc_plotOptions(series=list(stacking='normal')) %>% 
  hc_title(text = "Who watches most movies produced in their own country?",
           style = list(fontWeight = "bold")) %>%
  hc_subtitle(text = "Average for period 2012-2016") %>% 
  hc_xAxis(title = "") %>%
  hc_yAxis(title = "", min = 0, max = 100, labels = list(format = "{value}%")) %>% 
  hc_tooltip(pointFormat = "<span style=\"color:{series.color}\">{series.name}</span>:
             <b>{point.percentage:.1f}%</b>",
             shared = TRUE)

【问题讨论】：

标签： r highcharts r-highcharter

【解决方案1】：

JS 中的示例：

您可以创建一个没有数据的“幻影”系列，只是为了使用它的legendItemClick 事件：

  {
    // phantom series with no data
    name: 'Change the color of the second point',
    data: [],
    events: {
      legendItemClick: function() {
        var point = this.chart.series[0].points[1]; // second point
        if (point) {
          point.update({
            color: (ctr++ % 2) ? 'red' : 'blue'
          });
        }
        this.chart.redraw();
      }
    }
  }

现场演示： https://jsfiddle.net/kkulig/0k4m5d2q/

在这种情况下，您应该处理数据/类别更改。在 Highcharts 中，操纵类别的可见性并不是很直观，因为它们与 y 轴相关联，而不是与数据本身相关联。

本主题解释了如何解决这个问题：https://forum.highcharts.com/highcharts-usage/hide-and-show-categories-with-checkboxes-t39380/

【讨论】：