在行系列末尾带有系列颜色的系列名称

问题描述 投票:0回答:1

我要在系列末尾加上系列颜色的系列名称。我在这里寻找类似的输出-Highcharts Line Chart, display series name at the end of line series

我能够在系列行的末尾添加系列名称,但无法将其显示为系列的颜色。这是我无法将其包含在R的highcharter中的解决方案,因为它具有单引号和双引号。 R无法识别它。

 formatter: function() {
    return '<span style="color:'+this.series.color+'">'+this.series.name+'</span>';
  }

我的代码显示在下面-

highchart() %>% 
  hc_chart(type = "spline") %>% 
  hc_title(text = "Demo",
           align = "center",
           style = list(
             fontFamily = "Roboto",
             color = "#444",
             fontWeight = "bold"
           )) %>% 
  hc_xAxis(categories = iris$Species) %>% 
  hc_yAxis(labels = list(format = "{value}M")) %>% 
  hc_add_series(name   = "Sepal.Length", 
                data   = iris$Sepal.Length,
                marker = list(enabled= FALSE),
                color='red',
                lineWidth=4, 
                lineColor='red') %>% 
  hc_add_series(name   = "Petal.Length", 
                data   = iris$Petal.Length,
                marker = list(enabled= FALSE),
                type = "area", 
                color='#f6f3ef',
                lineWidth=3, 
                lineColor='#e4dcd2',
                dashStyle = "ShortDot") %>% 
  hc_plotOptions(
    series = list(
      dataLabels = list(
        enabled = TRUE,
        allowOverlap = TRUE,
        align = 'center',
        verticalAlign = 'bottom',
        style = list(fontSize = '14px', color = '#666'),
        formatter = JS("
              function() {
                  if (this.point.x == this.series.data.length - 1) {
                          return this.series.name;
                    }
                          return '';
                }")))) %>% 
  hc_tooltip(pointFormat="{point.series.name}:  €<b>{point.y:,.2f}M</b><br/>", shared= TRUE) %>% 
  hc_add_theme(anacap_theme(palettes = "lightbluegolden")) %>% 
  hc_exporting(enabled = TRUE)
r highcharts r-highcharter
1个回答
1
投票

由于您想在标记中保留双引号,因此不能像这样转义双引号吗?

formatter: function() {
  return '<span style=\"color:' + this.series.color + '\">' + this.series.name + '</span>';
}
© www.soinside.com 2019 - 2024. All rights reserved.