Блог

Главная - Вопросы по программированию - Как отформатировать круговую диаграмму Google в процентах с 2 десятичными знаками?

Как отформатировать круговую диаграмму Google в процентах с 2 десятичными знаками?

#charts #google-visualization

Вопрос:

Первоначальный фонд = 20000

прибыль = 10% (2000)

Новый фонд = 22000

Новый фонд 22000 составляет 90,91% от нового фонда 22000, но круговая диаграмма Google показывает, что это только 90,9%, как сделать так, чтобы он показывал 2 знака после запятой 90,91%?

введите описание изображения здесь

 google.charts.load("current", {packages:["corechart"]});
                                google.charts.setOnLoadCallback(drawChart2);
                                function drawChart2() {
                                    var data = google.visualization.arrayToDataTable([
                                          ['Label', 'Value'],
                                          ['Credit Fund', 20000],
                                          ['Gain', 2000],
                                          ['Drawndown', 0],
                                    ]);
            
                                    var options = {
                                    title: 'abcdfe',
                                    titlePosition: 'none',
                                    legend: { position: 'top', maxLines: 2  },    
                                    pieHole: 0.4,
                                    };

                                    var chart = new google.visualization.PieChart(document.getElementById('donutchart2'));
                                    chart.draw(data, options);
                                } 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart2" class="chart"></div>

Я пытался :

 var formatter = new google.visualization.NumberFormat({fractionDigits:2});
formatter.format(data, 1);

Но это не работает.

Ответ №1:

невозможно отформатировать процент, отображаемый на диаграмме.

но вместо этого вы можете использовать опцию pieSliceText: 'value' для отображения значения.
затем вручную рассчитайте проценты и используйте их для построения диаграммы.
и мы можем использовать пользовательскую подсказку для отображения реального значения.

см. Следующий рабочий фрагмент…

 google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // real data
  var dataReal = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Credit Fund', 20000],
    ['Gain', 2000],
    ['Drawndown', 0],
  ]);

  // aggregate real data to get total
  var dataAgg = google.visualization.data.group(
    dataReal,
    [{column: 0, type: 'string', modifier: function () {return 'Total'}}],
    [{aggregation: google.visualization.data.sum, column: 1, type: 'number'}]
  );

  // build chart data based on %
  var dataChart = new google.visualization.DataTable();
  for (var i = 0; i < dataReal.getNumberOfColumns(); i  ) {
    dataChart.addColumn(dataReal.getColumnType(i), dataReal.getColumnLabel(i));
  }

  // display real value in tooltip
  dataChart.addColumn({type: 'string', role: 'tooltip'});
  for (var i = 0; i < dataReal.getNumberOfRows(); i  ) {
    dataChart.addRow([dataReal.getValue(i, 0), (dataReal.getValue(i, 1) / dataAgg.getValue(0, 1)), dataReal.getValue(i, 0)   'n'   dataReal.getFormattedValue(i, 1)]);
  }

  // format decimals
  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.00 %'
  });
  formatNumber.format(dataChart, 1);

  var options = {
    pieSliceText: 'value',
    title: 'abcdfe',
    titlePosition: 'none',
    legend: {
      position: 'top',
      maxLines: 2
    },
    pieHole: 0.4,
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart2'));
  chart.draw(dataChart, options);
}); 
 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart2"></div>

Комментарии:

1. Красный цвет «Увеличивает» недостающий процент отображения, как это показать?

2. нужно сделать диаграмму больше и / или шрифт надписи меньше…

3. не очень хорошая идея, 0,1% уверен, что очень маленький слайд не может быть показан %

4. единственный другой вариант-изменить легенду —> position: 'labeled'

Метки: