在 R 中使用 highcharter 突出显示散点图的集群

Question

我在 R 中使用 highcharter pkg 来绘制散点图。

library(highcharter) 
# Load data
data("mtcars")
df <- mtcars
# Convert cyl as a grouping variable
df$cyl <- as.factor(df$cyl)
# Inspect the data
head(df[, c("wt", "mpg", "cyl", "qsec")], 4)
df %>% 
  hchart(
    'scatter', hcaes(x = wt, y = mpg, size = qsec, group = cyl),
    maxSize = "10%"
  )

highcharter pkg 中有一个很酷的功能，当您将鼠标悬停在图例中的一个集群上时，该特定集群的点会从其余集群中脱颖而出。 我不知道如何以编程方式控制此功能。我不想通过将鼠标悬停在集群上而是通过从代码中选择集群（可能通过定义集群组）来获得此视图，它可以给我突出显示的视图，如上图所示。

我检查了highcharts documentations，但我找不到任何线索。

欣赏它

Answer 1

正如您的其他回答者所暗示的那样，最好按系列简单地改变不透明度（这里每种颜色都是不同的系列）。

要理解下面代码中 c(.25, 1, .25) 对 opacity 的含义，请考虑控制颜色的因素。

unique(mtcars$cyl)
# [1] 6 4 8   # assume that HC sorted these

所以第一个不透明度值被分配给cyl == 4的点。

df %>% 
  hchart(opacity = c(.25, 1, .25), 
    'scatter', hcaes(x = wt, y = mpg, size = qsec, group = cyl),
    maxSize = "10%"
  )

您可以分配状态.但是，手动更改状态不会设置与状态关联的样式。

在此代码中，我将 cyl == 6 的那些点设置为 hover 的状态。但是，我没有触及其他痕迹。请注意，这需要在 hchart 调用中分配 id。

df %>% 
  hchart('scatter', hcaes(x = wt, y = mpg, size = qsec, group = cyl,
                          id = cyl), maxSize = "10%") %>% 
  htmlwidgets::onRender(
    "function(el) {
       var chart = $('#' + el.id).highcharts();
       var haloMe = chart.get('6');
       haloMe.setState('hover');
     }")

如果您仔细观察图像，6 中的第一个点具有光环效果。除此之外，你看不出有什么区别。 （你可能会注意到这有点小故障，还有。）

更改所有系列的状态也无济于事。在这个版本中，我将一个系列设置为“悬停”，将另外两个系列设置为“不活动”。没有区别。在您的浏览器中呈现时，您可以检查状态并查看它们的设置是否如此代码所示。

df %>% 
  hchart('scatter', hcaes(x = wt, y = mpg, size = qsec, group = cyl,
                          id = cyl), maxSize = "10%") %>% 
  htmlwidgets::onRender(
    "function(el) {
       var chart = $('#' + el.id).highcharts();
       var haloMe = chart.get('6');
       haloMe.setState('hover');
       var inact4 = chart.get('4');
       var inact8 = chart.get('8');
       inact4.setState('inactive');
       inact8.setState('inactive');
     }")

Answer 2

尝试为每个系列设置 opacity，范围从 0,1 到 1 以获得更多可见性。

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'xy'
  },
  legend: {
    enabled: true
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 12.5,
        symbol: 'circle',
        states: {
          hover: {
            enabled: false,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      }
    }
  },
  tooltip: {
    pointFormat: 'Name: {point.name}'
  },
  series: [{
    name: 'male',
    opacity: 1,
    data: [
      ['Alexander', 8, 7],
      ['Brage', 8, 7],
      ['Emil', 11, 3],
      ['Henrik', 12, 2],
      ['Isak', 9, 4],
      ['Johannes', 9, 4],
      ['Lucas', 7, 10],
      ['Magnus', 8, 7],
      ['Odin', 6, 12],
      ['Ola', 6, 12],
      ['Olav', 6, 12],
      ['Oliver', 7, 10],
      ['Oskar', 9, 4],
      ['Sverre', 6, 12],
      ['Tobias', 6, 12],
      ['William', 13, 1]
    ],

  }, {
    name: 'female',
    opacity: 0.1,
    data: [
      ['Ada', 7, 7],
      ['Alma', 6, 13],
      ['Amalie', 6, 13],
      ['Ella', 9, 2],
      ['Frida', 8, 5],
      ['Hannah', 7, 7],
      ['Helene', 7, 7],
      ['Ingrid', 7, 7],
      ['Maja', 8, 5],
      ['Maria', 6, 13],
      ['Nora', 9, 2],
      ['Sara', 9, 2],
      ['Sofia', 7, 7],
      ['Sofie', 7, 7],
      ['Tiril', 6, 13],
      ['Vilde', 10, 1]
    ]
  }]
});

Demo