Как применять форматы в гугл чартах простым способом - PullRequest
Новая
       12

Как применять форматы в гугл чартах простым способом

2 голосов
/ 12 июня 2019

Я видел много ответов в Интернете на этот вопрос, но все ответили по-своему.Они ответили примерами кода более 90 строк кода, поэтому трудно понять метод применения форматов.Может кто-нибудь объяснить, пожалуйста, метод применения форматов в Google-чартах, и есть разные методы для разных типов диаграмм?Мне нужно применить форматы на гистограммах и пончиковых диаграммах.Я хочу изменить формат на валюту и десятичные дроби. 

  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Marketplaces', 'Number Of Orders','Value of Order'],

    var chart = new google.visualization.PieChart(document.getElementById('sales_total_quantity'));
    chart.draw(data, options);
  }

1 Ответ

0 голосов
/ 12 июня 2019

, чтобы отформатировать значения диаграммы, как показано при наведении столбчатого или кругового среза,
вам нужно применить формат к таблице данных.

Вы можете использовать форматировщик чисел Google. 

var patternCurrency = '$#,##0.00';

// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
  pattern: patternCurrency
});
formatCurrency.format(data, 2);

, если вы также хотите, чтобы ось Y гистограммы отображалась как валюта,
вам нужно использовать опцию конфигурации -> vAxis.format 

var optionsBar = {
  // format y-axis
  vAxis: {
    format: patternCurrency
  }
};

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Marketplaces', 'Number Of Orders', 'Value of Order'],
    ['A', 10, 100.11],
    ['B', 20, 200.22],
    ['C', 30, 300.33],
  ]);

  var patternCurrency = '$#,##0.00';

  // format third column of data table
  var formatCurrency = new google.visualization.NumberFormat({
    pattern: patternCurrency
  });
  formatCurrency.format(data, 2);

  var optionsBar = {
    tooltip: {
      trigger: 'both'
    },
    // format y-axis
    vAxis: {
      format: patternCurrency
    }
  };

  var chartBar = new google.visualization.ColumnChart(document.getElementById('chart-bar'));
  google.visualization.events.addListener(chartBar, 'ready', function () {
    // show tooltip
    chartBar.setSelection([{column: 2, row: 0}]);
  });
  chartBar.draw(data, optionsBar);

  var optionsPie = {
    height: 300,
    pieHole: 0.2
  };

  var chartPie = new google.visualization.PieChart(document.getElementById('chart-pie'));
  chartPie.draw(data, optionsPie);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-bar"></div>
<div id="chart-pie"></div>
...