Highchartr: 同步点、线的颜色和图例

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.

ぐ或

我可以这样做：-点和线共享相同的颜色映射-点和线可以通过点击图例中的线来切换到一起-点在图例中根据它们的形状而不是颜色分别显示？

谢谢！我使用的是highchartrtr。

Answer 1

一般来说，至少可以用几种不同的方法来实现。这一切都取决于你的数据，你还没有提供（我创建了一个样本数据）。

此外，我将提供所有的例子在jsFiddle（JavaScript），因为它是更快地解释的东西，以快速的在线示例的方式。最后的答案将包含R代码 (如果需要的话，也许会用一些自定义的JavaScript，但在R中都会重现。

---

首先，你认为你需要一个单独的系列的假设是错误的，会导致问题。如果你想让你的线上的标记具有相同的颜色，并且你想在图例点击时将它们一起切换，那么你不需要单独的系列--。在某些点上启用标记，一个系列就足够了。，请看这个例子。https:/jsfiddle.netBlackLabels24rk9x7。在这种情况下，需要正确定义R数据。

---

如果你不想像上面描述的那样简单，你可以像你原来的问题一样，把线和标记作为单独的系列来保存.在这种情况下，你可以使用 系列.linkedTo 属性来连接你的 "点 "系列和线系列（BTW在Highcharts中没有类似于 "点" 系列型，它是 "分散" 系列类型。另一个原因是你的代码是错误的，是不工作的，你被取消投票），但在Highcharter中有一个问题 - 不工作，似乎是一个错误，应该在Highcharter GitHub repo上报告。

这是一个JavaScript版本，可以正常工作。https:/jsfiddle.netBlackLabel3mtdfqLo）。在这个例子中，如果你想让标记和线系列保持相同的颜色，你可以手动定义颜色，或者你可以写一些自定义的代码（就像我做的那样），它会自动为你改变颜色。

而这也是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中复制。