列中值旁边的显示单位

Question

所以我一直在学习我可以使用注释来显示列中的列值。

view.setColumns([0, //The "descr column"
1, //Downlink column
{
    calc: "stringify",
    sourceColumn: 1, // Create an annotation column with source column "1"
    type: "string",
    role: "annotation"
}]);

我希望能够在列中的每个值之后显示一个单位。 例如％'符号。 有谁知道怎么做？

（我在这里使用另一个问题的小提琴， Show value of Google column chart）

http://jsfiddle.net/bald1/10ubk6o1/

Answer 1

在绘制图表之前，您可以使用Google的NumberFormat课程格式化data

'stringify'计算公式默认使用格式化值

format上的NumberFormat方法有两个参数：
1）要格式化的数据表
2）要格式化的列的列索引

var formatNumber = new google.visualization.NumberFormat({
  pattern: '#,##0',
  suffix: '%'
});
formatNumber.format(data, 1);
formatNumber.format(data, 2);

请参阅以下工作代码段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Descr', 'Downlink', 'Uplink'],
    ['win7protemplate', 12, 5],
    ['S60', 14, 5],
    ['iPad', 3.5, 12]
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0',
    suffix: '%'
  });
  formatNumber.format(data, 1);
  formatNumber.format(data, 2);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, //The "descr column"
  1, //Downlink column
  {
    calc: "stringify",
    sourceColumn: 1, // Create an annotation column with source column "1"
    type: "string",
    role: "annotation"
  },
  2, // Uplink column
  {
    calc: "stringify",
    sourceColumn: 2, // Create an annotation column with source column "2"
    type: "string",
    role: "annotation"
  }]);

  var columnWrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: view
  });

  columnWrapper.draw();
}

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

注意：我意识到提供的示例来自另一个问题，但您知道......

建议不使用 jsapi加载库，根据release notes ...

  

通过jsapi加载程序保留的Google图表版本不再一致更新。从现在开始，请使用新的gstatic加载程序（loader.js）。

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

这也会将load语句更改为...

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