使用工具提示的 Highcharter 的 hctreemap2 中的百分比？答案

【问题标题】：Percentage in hctreemap2 of Highcharter using tooltip?使用工具提示的 Highcharter 的 hctreemap2 中的百分比？
【发布时间】：2020-07-19 06:15:55
【问题描述】：

我用 Highcharter 制作了一个树状图。由于地图是交互式的，我希望它同时显示总量和每组代表总数的百分比。我根据此处的其他问题制作了以下 2 个代码，但两种方式都显示百分比为 0.00%。如何向 highcarter 树形图工具提示添加百分比信息？

#Way 1
hctreemap2(data =Objeto,
           group_vars = c("objeto_contratar"),
           size_var = "total",
           color_var = "total",
           layoutAlgorithm = "squarified",
           levelIsConstant = FALSE) %>% 
  hc_colorAxis(minColor = brewer.pal(7, "Blues")[2],
               maxColor = brewer.pal(7, "Blues")[7]) %>%
               hc_tooltip(pointFormat = "Objeto: {point.name} <br>
                            Contratos: {point.value:,.0f} <br>
                            Porcentaje: {point.percentage:.2f} %")  %>% 
  hc_exporting(enabled = TRUE)

#Way 2
hctreemap2(data =Objeto,
           group_vars = c("objeto_contratar"),
           size_var = "total",
           color_var = "total",
           layoutAlgorithm = "squarified",
           levelIsConstant = FALSE) %>% 
  hc_colorAxis(minColor = brewer.pal(7, "Blues")[2],
               maxColor = brewer.pal(7, "Blues")[7]) %>%
  hc_tooltip(formatter = JS("function(){
                                return  '</b>'  + this.point.name + ': <br> Contratos: ' +this.point.value+' <br> Porcentage: '+Highcharts.numberFormat(this.point.percentage)+'%'
  }"),useHTML = FALSE)  %>% 
  hc_exporting(enabled = TRUE)

Could someone tell me how do I get it to display both data (the amount and percentage it represents) on the same graph when I hover over it?

【问题讨论】：

能否提供您的数据，以便我运行您的图表？我可以看到您已经在使用 pointFormat 和 formatter 并且您在两者中都使用 point.percentage - 那么确切的问题是什么？你到底想达到什么目的？

标签： r highcharts tooltip percentage treemap

【解决方案1】：

有人帮助了我。这就是他所做的并且有效。我希望这对其他人有帮助。

hctreemap2(data =Objeto,
               group_vars = c("objeto_contratar"),
               size_var = "total",
               color_var = "total",
               layoutAlgorithm = "squarified",
               levelIsConstant = FALSE) %>% 
      hc_colorAxis(minColor = pal_azul(7)[1],
                   maxColor = pal_azul(7)[7]) %>% 
      hc_tooltip(formatter = JS('function () {
                            var total = 0;
                            for (var i = 0; i < this.series.data.length; i++)
                            {
                            if (this.series.data[i].node.children.length == 0)
                            total+=this.series.data[i].node.val;
                            }
                            var value;
                            if (this.point.node.children.length == 0)
                            {
                            value = this.point.options.value;
                            }
                            else
                            {
                            value = this.point.node.childrenTotal;
                            }
                            var porcentage = (value / total) *100;
                            return  "</b>"  + this.point.name + ": <br> Contratos: " +this.point.value+" <br> Porcentage: "+Highcharts.numberFormat(porcentage)+"%"
                            }'),useHTML = FALSE)  %>% 
      hc_exporting(enabled = TRUE)

【讨论】：