highcharts R中带有数字符号(日期和时间戳)的多个工具提示

vd2z7a6w 于 2022-11-11 发布在 Highcharts

关注(0)|答案(1)|浏览(130)

我尝试用R.
我将在不同的数据集中使用此图表。是大的（百万，十亿），而在其他的小（K）。我试图用JS创建一个数字符号的格式化程序。但是，它将日期更改为时间戳，并在一个框中。
我想创建如下图所示的线图：Image
数据来源：

structure(list(Date = structure(c(17256, 17347, 17439, 17531, 
17621, 17712, 17804, 17896, 17986, 18077, 18169, 18261, 18352, 
18443, 18535, 18627, 18717, 18808, 18900), class = "Date"), Amount = c(23046000, 
22207000, 16127000, 15341000, 16529000, 16646000, 27638000, 25777000, 
28478000, 20579000, 13703000, 24954000, 27012000, 18010000, 13332000, 
21300000, 15122000, 17606000, 17110000)), row.names = c(NA, -19L
), class = c("data.table", "data.frame"))

structure(list(Date = structure(c(17256, 17347, 17439, 17531, 
17621, 17712, 17804, 17896, 17986, 18077, 18169, 18261, 18352, 
18443, 18535, 18627, 18717, 18808, 18900), class = "Date"), Amount = c(2025000, 
2217000, 2122000, 2893000, 3352000, 2837000, 4073000, 1916000, 
2170000, 2663000, 11215000, 11834000, 10065000, 5382000, 6461000, 
4929000, 5282000, 4386000, 5186000)), row.names = c(NA, -19L), class = c("data.table", 
"data.frame"))

编码：

library(highcharter)
library(dplyr)
highchart(type = "stock") %>% 
   hc_add_series(data= data1,hcaes(x= Date, y = Amount),type = "line") %>% 
   hc_add_series(data= data2,hcaes(x= Date, y = Amount),type = "line")

工具提示中包含格式化程序的示例：

library(highcharter)
library(dplyr)
js <- JS("function () {
function test(labelValue) {
  const sign = Math.sign(Number(labelValue));
  // Nine Zeroes for Billions
  return Math.abs(Number(labelValue)) >= 1.0e12
    ? sign * (Math.abs(Number(labelValue)) / 1.0e12).toFixed(2) + 'T'
    : // Six Zeroes for Millions
    Math.abs(Number(labelValue)) >= 1.0e9
    ? sign * (Math.abs(Number(labelValue)) / 1.0e9).toFixed(2) + ' B'
    : // Three Zeroes for Thousands
    Math.abs(Number(labelValue)) >= 1.0e6
    ? sign * (Math.abs(Number(labelValue)) / 1.0e6).toFixed(2) + ' M'
    : // Three Zeroes for Thousands
    Math.abs(Number(labelValue)) >= 1.0e3
    ? sign * (Math.abs(Number(labelValue)) / 1.0e3).toFixed(2) + ' K'
    : Math.abs(Number(labelValue));

};
            return this.points.reduce(function (s, point) {
                return  s   + '<br/>' + point.series.name + ': ' +
                    test(point.y);
            }, '<b>' + this.x + '</b>');
            }
        ")

highchart(type = "stock") %>% 
   hc_add_series(data= data1,hcaes(x= Date, y = Amount),type = "line") %>% 
   hc_add_series(data= data2,hcaes(x= Date, y = Amount),type = "line") %>%
  hc_tooltip(formatter = js)

输出：with formatter

highcharts

来源：https://stackoverflow.com/questions/71465560/multiple-tooltip-with-numericsymbols-date-turns-timestamp-in-r

1条答案

按热度按时间

yzuktlbb1#

如果你想保留工具提示数据的分割，也许你应该使用tooltip.split配置？https://api.highcharts.com/highcharts/tooltip.split

library('highcharter')

highchart() %>%
  hc_add_series(
    type = "line",
    data = list(5, 4, 3, 5)
  ) %>%
  hc_add_series(
    type = "line",
    data = list(15, 14, 13, 15)
  ) %>%
  hc_tooltip(formatter = JS("function () {
            // The first returned item is the header, subsequent items are the
            // points
            return ['<b>' + this.x + '</b>'].concat(
                this.points ?
                    this.points.map(function (point) {
                        return point.series.name + ': ' + point.y + 'm';
                    }) : []
            );
        }"), split = TRUE) %>%
  hc_chart(events = list(load = JS("function() {
      var chart = this; chart.update({
        chart: {
          backgroundColor: '#FCFFC5'
        }
      });
    }
    ")
  ))

赞(0）回复(0）举报 2022-11-11

我来回答

highcharts R中带有数字符号(日期和时间戳)的多个工具提示

1条答案

相关问题

热门标签

最新问答