Question

我正在使用highchartr包来创建交互式图表。

我的图表上有对应于不同系列的线。另外，我想在线条的某些点上具有形状。

很容易在正确的位置获得分数。但是，我想将点颜色映射到与其关联的线。当用户单击该行的图例条目时，我也希望切换相关的点。

代码如下：

 highchart() %>%
    hc_add_series(
      type="line",
      marker=list(enabled=F),
      data=input_data, 
      mapping=hcaes(x=x, y=y, group=series_name)
    ) %>%
    hc_add_series(
      type="point", 
      data=input_data %>% filter(! is.na(marker)), 
      mapping=hcaes(x=x, y=y, color=series_name, fill=series_name, group=series_name, shape=marker)
    )

结果在正确的位置获得分数。但是，点颜色与线在不同的颜色映射上。单击图例中该行的条目仅可切换该行-点由series_name显示为单独的条目。

什么

我该怎么做： -点和线共享相同的颜色映射 -通过单击图例中的线可以将点和线一起切换 -这些点根据形状而不是颜色单独显示在图例中？

谢谢！

Answer 1

通常，它可以至少以几种不同的方式来实现。这完全取决于您尚未提供的数据（我创建了示例数据）。

此外，我将在jsFiddle（JavaScript）中提供所有示例，因为使用快速的在线示例可以更快地解释这种情况。 最终答案将包含R代码（如果需要，可以使用一些自定义JavaScript，但所有代码都可以在R中复制。

首先，您认为需要一个单独的系列的假设是错误的，并且会引起问题。如果您希望线上的标记具有相同的颜色，并且希望在图例单击时将它们一起切换，那么就不需要单独的系列-一个在某些点上启用了标记的系列就足够了，请参见此示例：https://jsfiddle.net/BlackLabel/s24rk9x7/ 在这种情况下，需要正确定义R数据。

如果您不想如上所述那样简单，可以将线条和标记作为单独的系列保留，就像原始问题一样。在这种情况下，您可以使用series.linkedTo属性将“点”系列连接到线系列（在Highcharts中，顺便说一句，没有“点” 系列类型，它是 “散布” 系列类型。您的代码错误且无法正常工作且未投票的另一个原因），但Highcharter中存在问题-无效，似乎是一个错误，应报告在Highcharter GitHub存储库上。

这是一个正常运行的JavaScript版本：https://jsfiddle.net/BlackLabel/3mtdfqLo/ 在此示例中，如果要使标记和线系列保持相同的颜色，则可以手动定义颜色，也可以编写一些自定义代码（如我所做的那样），这些代码将自动为您更改颜色。

这是应该起作用的同一R版本，但不是：

library(highcharter)

highchart() %>%
  hc_add_series(
    data=list(4, 3, 5, 6, 2, 3)
  ) %>%
  hc_add_series(
    data=list(14, 13, 15, 16, 12, 13),
    id="first"
  ) %>%
  hc_add_series(
    data=list(10, 8, 6, 2, 5, 12),
    id="second"
  ) %>%
  hc_add_series(
    type="scatter",
    linkedTo="first",
    data=list(list(1, 3), list(2, 5))
  ) %>%
  hc_add_series(
    type="scatter",
    linkedTo="second",
    data=list(list(1, 13), list(2, 15), list(3, 16))
  ) %>%
  hc_plotOptions(
    line = list(marker=list(enabled=F))
  )

hc_add_series函数可能存在问题。 作为一种解决方法，您可以将其全部编写为自定义JavaScript代码，该代码（再次）可以很好地工作：

library(highcharter)

highchart() %>%
  hc_plotOptions(
    line = list(marker=list(enabled=F))
  ) %>%
  hc_chart(
    events = list(load = JS("function() {

        this.addSeries({
          data: [4, 3, 5, 6, 2, 3],
          id: 'first'
        });

        this.addSeries({
          data: [14, 13, 15, 16, 12, 13],
          id: 'second'
        });

        this.addSeries({
          data: [10, 8, 6, 2, 5, 12]
        });

        this.addSeries({
          type: 'scatter',
          linkedTo: 'first',
          data: [[1, 3], [2, 5]]
        });

        this.addSeries({
          type: 'scatter',
          linkedTo: 'second',
          data: [[1, 13], [2, 15], [3, 16]]
        });

    }")))

当然，最后一个示例不包含更改颜色的功能-您可以从上面的jsFiddle复制它。

highchartr：同步点和线的颜色以及图例

1 个答案: