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

我用的是 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.

enter image description here

ぐ或

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

谢谢!我使用的是highchartrtr。

解决方案:

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

此外,我将提供所有的例子在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中复制。

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在Selenium中选择多行?

2022-9-8 21:49:36

未分类

从文件中读取定界符之间的数字

2022-9-8 21:49:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索