Google круговая диаграмма процентный расчет

У меня есть страница, которая отображает данные в виде круговой диаграммы. Я использую Google диаграммы и вот код: 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product', 'Sale In Percent'],
        ['product2', 5.5],
        ['product3', 7.5],
        ['product4', 1.5],
        ['product5', 8.5],
        ]);

        var options = {
          title: 'Product Sales'
        };

       var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
        chart.draw(data, options);
      }
    </script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>

А вот и рабочая скрипка JS: https://jsfiddle.net/alex4uthis/j78vmq00/2/

Здесь у меня есть еще 1 продукт в качестве product1, и его значение равно 77. Поскольку это значение всегда выше, я опустил его с графика. Когда я рисую диаграмму, мы видим, что product2 процентов становится 23,9%, product3 процентов становится 32,6 и т. д.... Но я хочу, чтобы круговая диаграмма рисовалась с тем, что я дали в графе "продажа в процентах".(Означает product1 ничья с 5.5 и т. д...) Пожалуйста, помогите мне в этом.

1 2
javascript jquery google-visualization

1 ответ:

Вы не можете иметь круговую диаграмму, которая составляет менее 100%, поэтому библиотека предполагает, что сумма передаваемых значений должна считаться 100%.

Поскольку вы не проходите 77, ваши значения складываются только до 23. 5.5/23 = 23.9% и 7.5/23 = 32.6%

Если вы хотите, чтобы график отображался с метками, считывающими предоставленные вами проценты, первое, что вам нужно сделать, это установить опцию pieSliceText в value, чтобы обозначить срез с количественным значением среза.' (https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options)

Далее, если вы хотите показать метку со знаком процента, вы просто захотите вручную добавить их после того, как диаграмма отобразится следующим образом: 

[].slice.call(document.querySelectorAll('#piechart2 path + text'))
        .forEach(function(el) {
            el.textContent += '%';
        });

Вот рабочая скрипка: https://jsfiddle.net/tq37y0p5/1/

1