【问题标题】:Highcharter - move data label to top of columnHighcharter - 将数据标签移动到列顶部
【发布时间】:2018-01-01 11:47:20
【问题描述】:

我想将瀑布图中的数据标签(默认情况下以列为中心)移动到每列上方。 通过 Highcharts 选项,我发现了 overflow option 和这个 SO post 关于如何使用 highcharts 移动数据标签(虽然不是 highcharter)。

但是,执行设置crop = FALSEoverflow = 'none' 的建议步骤并没有移动数据标签。

这是一个建议设置的小例子:

library(highcharter)

dataframe <- data.frame(name = c("A","B","C", "D"),
                        y = c(12.10, 5.45, -8.60, NA),
                        isIntermediateSum = c(FALSE, FALSE, FALSE, FALSE),
                        isSum = c(FALSE, FALSE, FALSE, TRUE),
                        color = c("#377EB8", "#4DAF4A", "#E41A1C", "#377EB8"),
                        stringsAsFactors = F)

data_list = dataframe %>% list_parse()

highchart() %>% 
  hc_chart(type = "waterfall") %>% 
  hc_title(text = "") %>% 
  hc_subtitle(text = "") %>%
  hc_xAxis(type = 'category') %>%
  hc_yAxis(
    title = list(text = ""),
    labels = list(format = "{value:,.2f}%", useHTML = TRUE)
  ) %>%
  hc_legend(enabled=FALSE) %>%
  hc_tooltip(pointFormat = '<b>{point.y:,.2f}%</b>', useHTML = TRUE) %>%
  hc_add_series(data = data_list, 
                dataLabels = list(
                  enabled=TRUE,
                  formatter= JS("function(){ return Highcharts.numberFormat(this.y, 2, ',') + '%';}"),
                  style=list(
                    color="#FFFFFF",
                    fontWeight="bold",
                    textShadow="0px 0px 3px black"
                  ),
                  crop = FALSE,
                  overflow = 'none'
                )
  )

你们中有人知道如何移动数据标签吗?

【问题讨论】:

标签: javascript r highcharts r-highcharter


【解决方案1】:

如果我理解正确的话

verticalAlign: StringSince 2.3.3 数据标签的垂直对齐方式。可以是顶部、中间或底部之一。默认值取决于数据,例如在柱形图中,标签在正值之上和负值之下。

doc

        dataLabels: {verticalAlign: 'top'}

JS 小提琴:http://jsfiddle.net/obryLg6q/


新小提琴:http://jsfiddle.net/obryLg6q/1/

        crop: false,
        overflow: 'none',
        x: 0,
        y: -30, // above the bar

将 dataLabels.inside 设置为 false:jsfiddle.net/obryLg6q/2 – Grzegorz Blachliński 18 分钟前

Highcharts 开发者评论。我认为你应该遵循这个建议)

       crop: false,
       overflow: 'none',
       inside: false

【讨论】:

  • 我的问题可能没有那么精确:我需要每个条形上方而不是内部的数据标签。不过,感谢您的帮助。
  • @Martin G. 将 x y 添加到数据标签
  • 感谢 @Grzegorz Blachliński 指向内部选项,并感谢康斯坦丁发布它!
猜你喜欢
  • 1970-01-01
  • 2016-12-23
  • 2013-02-13
  • 2012-03-11
  • 1970-01-01
  • 1970-01-01
  • 2018-04-25
  • 2019-11-15
  • 2023-03-19
相关资源
最近更新 更多