列中值旁邊的顯示單位

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