Echarts4r：ツールチップの合計からのパーセンテージで積み上げ面グラフを作成します

debugcn 投稿 Dev

iomedee

を使用して積み上げ面グラフを作成する必要がありecharts4rます。javascriptのすばらしい例にもかかわらず、Rを使用して面グラフを積み重ねる方法を見つけることができません。

理想的には、highcharterパッケージを使用した私の例のように、合計からのパーセンテージでツールチップをチャートに追加することも必要です。

library(echarts4r)
library(highcharter)

set.seed(2018)
dt <- data.frame(a =1:10,
                 x = rnorm(10, mean = 20, sd = 5), 
                 y = rnorm(10, mean = 20, sd = 5),
                 z = rnorm(10, mean = 10, sd = 5))


echarts <- dt %>%
  e_charts(a) %>%
  e_area(x, stack = "stack", origin = 'start') %>%
  e_area(y, stack = "stack", origin = 'start') %>%
  e_area(z, stack = "stack", origin = 'start') %>%
  e_grid(left = '4%', right = '3%', bottom = '10%', containLabel = true) %>%
  e_tooltip(trigger = "axis", axisPointer = list(type = 'cross')) %>%
  e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
  e_toolbox_feature("saveAsImage", title = 'save as image') %>%
  e_toolbox_feature("dataZoom", title = list(zoom = "zoom", back = "back")) %>%
  e_toolbox_feature("restore", title = 'restore') %>%
  e_theme("infographic") %>%
  e_legend(type = 'scroll', bottom = 1)

echarts

highchart <-  highchart() %>%
  hc_xAxis(categories = dt$a) %>%
  hc_add_series(data = dt$x, name = 'x') %>%
  hc_add_series(data = dt$y, name = 'y') %>%
  hc_add_series(data = dt$z, name = 'z') %>%
  hc_chart(type = "area") %>%
  hc_plotOptions(area = list(stacking = "normal", lineColor = "#ffffff",
                             lineWidth = 1, marker = list( lineWidth = 1,
                                                           lineColor = "#ffffff"))) %>%
  hc_legend(reversed = FALSE) %>%
  hc_tooltip(crosshairs = TRUE, backgroundColor = "#FCFFC5", shared = TRUE, borderWidth = 5, 
             pointFormat = "<span style=\"color:{series.color}\">{series.name}</span>:
                 <b>{point.percentage:.1f}%</b> ({point.y:,.0f} users)<br/>") 

highchart

JohnCoene

それを行う1つの方法、非常によく似ていhighcharterます：

dt %>%
    e_charts(a) %>%
    e_area(x, stack = "stack", origin = 'start') %>%
    e_area(y, stack = "stack", origin = 'start') %>%
    e_area(z, stack = "stack", origin = 'start') %>%
    e_grid(left = '4%', right = '3%', bottom = '10%', containLabel = TRUE) %>%
    e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
    e_toolbox_feature("saveAsImage", title = 'save as image') %>%
    e_toolbox_feature("dataZoom", title = list(zoom = "zoom", back = "back")) %>%
    e_toolbox_feature("restore", title = 'restore') %>%
    e_theme("infographic") %>%
    e_legend(type = 'scroll', bottom = 1) %>%
    e_tooltip( trigger ="axis",
              formatter = htmlwidgets::JS("
              function(params){
                var tot = params[0].name + params[1].value[0] + params[2].value[0]
                function perc(x){return(Math.round((x/tot) * 100))};
                return('x: ' + params[0].value[1] + ' (' + perc(params[0].value[1]) + '%)' + '<br>' + 'y:' + params[1].value[1] + ' (' + perc(params[1].value[1]) + '%)' + '<br>' + 'z:' + params[2].value[1] + ' (' + perc(params[2].value[1]) + '%)')
                                          }
              ")
              )

Webサイトのツールチップの詳細。

編集コメントありがとうございます。質問の一部を省略して申し訳ありません。なんらかの理由で、私が気付いていなかった理由として、スタッキングはカテゴリカルx軸でのみ機能します。以下は、そこに到達するための2つのオプションです。

# options one use character or vector.
dt %>% 
    dplyr::mutate(a = as.character(a)) %>% 
    e_charts(a) %>%
    e_area(x, stack = "stack") %>%
    e_area(y, stack = "stack") %>%
    e_area(z, stack = "stack") %>%
    e_grid(left = '4%', right = '3%', bottom = '10%') %>%
    e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
    e_toolbox_feature("saveAsImage", title = 'save as image') %>%
    e_toolbox_feature("restore", title = 'restore') %>%
    e_theme("infographic") %>%
    e_legend(bottom = 1) %>%
    e_tooltip( trigger ="axis",
               formatter = htmlwidgets::JS("
                                           function(params){
                                           var tot = params[0].name + params[1].value[0] + params[2].value[0]
                                           function perc(x){return(Math.round((x/tot) * 100))};
                                           return('x: ' + params[0].value[1] + ' (' + perc(params[0].value[1]) + '%)' + '<br>' + 'y:' + params[1].value[1] + ' (' + perc(params[1].value[1]) + '%)' + '<br>' + 'z:' + params[2].value[1] + ' (' + perc(params[2].value[1]) + '%)')
                                           }
                                           ")
               ) 

# option 2
# Use e_x_axis to change the axis type
dt %>% 
    e_charts(a) %>%
    e_area(x, stack = "stack") %>%
    e_area(y, stack = "stack") %>%
    e_area(z, stack = "stack") %>%
    e_grid(left = '4%', right = '3%', bottom = '10%') %>%
    e_toolbox(left = 'right', itemSize = 15, top = 22) %>%
    e_toolbox_feature("saveAsImage", title = 'save as image') %>%
    e_toolbox_feature("restore", title = 'restore') %>%
    e_theme("infographic") %>%
    e_legend(bottom = 1) %>%
    e_tooltip( trigger ="axis",
               formatter = htmlwidgets::JS("
                                           function(params){
                                           var tot = params[0].name + params[1].value[0] + params[2].value[0]
                                           function perc(x){return(Math.round((x/tot) * 100))};
                                           return('x: ' + params[0].value[1] + ' (' + perc(params[0].value[1]) + '%)' + '<br>' + 'y:' + params[1].value[1] + ' (' + perc(params[1].value[1]) + '%)' + '<br>' + 'z:' + params[2].value[1] + ' (' + perc(params[2].value[1]) + '%)')
                                           }
                                           ")
               ) %>%
  e_x_axis(type = "category")

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]