Kibana displays customized percentage in pie chart_css percentage pie chart-CSDN博客

本文链接：https://blog.csdn.net/nisxiya/article/details/71232231

Introduction

Kibana 3 has got a good pie chart, which will displays the percentage label by default. But when it comes to Kibana 4 or even Kibana 5.X, this feature has gone. Let’s see what it looks like.

Kibana 3
这里写图片描述
Kibana 4

Many guys complained about this in the github discuss section. This is the discussion thread: https://github.com/elastic/kibana/issues/2284

I have also come across this and decided to implement it by myself.

Solution

Env

What I have got during my implementation includes

Kibana 4.5.4
AWS Elasticsearch 2.3.1

Files changed

Kibana 4 and Kibana 5.X are using d3 (version:3.5.6) to draw the graphs. It is really old, but I decided not to upgrade it since some APIs of d3 have changed since.
The whole thing is simple. Kibana is using d3 to draw the pie chart, so what I need to do is to hack the pie chart of kibana. So my PR looks like the following:
这里写图片描述

I would also paste the file here, to help you copy & paste.

diff --git a/src/ui/public/vislib/visualizations/pie_chart.js b/src/ui/public/vislib/visualizations/pie_chart.js
index baad87f..c68ecf9 100644
--- a/src/ui/public/vislib/visualizations/pie_chart.js
+++ b/src/ui/public/vislib/visualizations/pie_chart.js
@@ -135,12 +135,12 @@ define(function (require) {
         return Math.max(0, y(d.y + d.dy));
       });

-      var path = svg
+      var g = svg
       .datum(slices)
       .selectAll('path')
       .data(partition.nodes)
-      .enter()
-        .append('path')
+      .enter();
+      var path = g.append('path')
         .attr('d', arc)
         .attr('class', function (d) {
           if (d.depth === 0) { return; }
@@ -153,6 +153,25 @@ define(function (require) {
           return color(d.name);
         });

+      // set the default text
+      g.append('text')
+        .attr('transform', function (d) {
+          var _d = arc.centroid(d);
+          _d[0] *= 1.1; //multiply by a constant factor
+          _d[1] *= 1.1; //multiply by a constant factor
+          return 'translate(' + _d + ')';
+        })
+        .attr('dy', '.0em') // y axis offset
+        .style('text-anchor', 'middle')
+        .text(function (d) {
+          if (d.hasOwnProperty('name') && d.hasOwnProperty('percentOfParent') &&
+            d.percentOfParent >= 0.05 /* If too small, just do not show */ ) {
+            return d.name + ':' + ((d.percentOfParent * 100).toFixed(2)) + '%';
+          } else {
+            return '';
+          }
+        });
+
       if (isTooltip) {
         path.call(tooltip.render());
       }