首页 文章

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

提问于
浏览 次
0

我正在网站上使用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)
r highcharts r-highcharter

1 回答

  • 1

    Example in JS:

    您可以创建一个没有数据的"phantom"系列只是为了使用它的 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();
      }
    }
  }

    Live demo: https://jsfiddle.net/kkulig/0k4m5d2q/

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

    本主题说明如何解决此问题：https://forum.highcharts.com/highcharts-usage/hide-and-show-categories-with-checkboxes-t39380/

    回复于

相关问题