將自定義文本添加到Google餅圖中的值？

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>