列中值旁边的显示单位

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

我想能够在列的每个值之后显示的单元。 例如％'符号。 有谁知道如何做到这一点？

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

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

Answer 1

你可以使用谷歌的NumberFormat类绘制图表

的'stringify'计算公式之前的data格式化将默认使用格式化的值

format方法上NumberFormat OD使用两个参数：
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'] 
});