高图/高图堆叠条形图中的交互式行过滤

时间:2018-03-06 13:50:14

标签: r highcharts r-highcharter

我在网站上使用highcharts图(直接用R中的highcharter制作)。我想要包含以下图表,使用下面的R代码粘贴创建。

Example stacked barchart in highcharter

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

如果在某种程度上可以在图例中添加与任何颜色无关的其他类别,那就太棒了......所以,传说看起来会是:"外国电影","国内电影","大国家","小国家",并且可以点击其中一个来过滤掉行。

这是我的代码:

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)

1 个答案:

答案 0 :(得分:1)

JS中的示例:

你可以创建一个&#34;幻像&#34;系列没有数据只是为了使用它的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/