javascript - 如何在谷歌图表中应用格式的简单方法

Question

我在网上看到了很多关于这个问题的答案，但每个人的回答方式都不一样。他们用代码示例回答了90+行代码，因此很难理解应用格式的方法。有人可以解释一下在谷歌图表中应用格式的方法吗？不同类型的图表有不同的方法吗？我需要在条形图和圆环图上应用这些格式。我想将格式更改为货币和小数。

  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);
  }

Answer 1

为了格式化图表值，如悬停条形图或饼图时所示，
您需要对数据表应用一种格式。

您可以使用谷歌的数字格式化程序。

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>