javascript - 将自定义文本添加到谷歌饼图中的值？

Question

以下工作并显示其中包含值的饼图:

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['Internal studio',  3.5],
      ['External studio',  2.1],
    ]);

    var options = {
      legend: 'none',
      fontSize: '16',
      pieSliceText: 'value',
      pieSliceBorderColor:"transparent",
      backgroundColor: {
        fill:'#090e1a', 
        strokeSize: 1
      }
    };

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

我想在值旁边添加 M，例如。 3.5M

我试过:

      ['Internal studio',  3.5+"M"],
      ['External studio',  2.1+"M"]

但这是错误的。

Answer 1

在您的数据中，您可以同时提供值 (v:) 和格式化值 (f:)，
通过使用对象表示法。

var data = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Internal studio',  {v: 3.5, f: '3.5M'}],
  ['External studio',  {v: 2.1, f: '2.1M'}],
]);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Language', 'Speakers (in millions)'],
    ['Internal studio',  {v: 3.5, f: '3.5M'}],
    ['External studio',  {v: 2.1, f: '2.1M'}],
  ]);

  var options = {
    legend: 'none',
    fontSize: '16',
    pieSliceText: 'value',
    pieSliceBorderColor:"transparent",
    backgroundColor: {
      fill:'#090e1a', 
      strokeSize: 1
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single"></div>

---

另一种选择，谷歌有一个你可以使用的数字格式化程序，
带有格式选项 --> 'short'

这将允许您提供实际值，
但将值 3,500,000 显示为 3.5M

它会自动使用 K 表示千等...

var data = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Internal studio',  3500000],
  ['External studio',  2100000],
]);

var formatShort = new google.visualization.NumberFormat({
  pattern: 'short'
});
formatShort.format(data, 1);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Language', 'Speakers (in millions)'],
    ['Internal studio',  3500000],
    ['External studio',  2100000],
  ]);

  var formatShort = new google.visualization.NumberFormat({
    pattern: 'short'
  });
  formatShort.format(data, 1);

  var options = {
    legend: 'none',
    fontSize: '16',
    pieSliceText: 'value',
    pieSliceBorderColor:"transparent",
    backgroundColor: {
      fill:'#090e1a', 
      strokeSize: 1
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single"></div>