列内の値の隣に表示単位

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

Iは、列内の各値の後に単位を表示できるようにしたいです。 たとえば、％記号です。 誰でもこれを行う方法を知っていますか？

（私はSOにここで別の質問からバイオリンを使用し、 Show value of Google column chart）

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

Answer 1

あなたは'stringify'計算式チャート

を描画する前にdataをフォーマットするために、GoogleのNumberFormatクラスを使用することができますデフォルトでフォーマットされた値を使用します

formatNumberFormatの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>

---

ノート：

が... release notesによると、ライブラリをロードするためにjsapiを使用していない

を をお勧めします...私は提供された例は、別の質問からで実現していますが知っているだけのよう

jsapiローダーを介して利用可能なGoogle Chartsのバージョンは、一貫して更新されなくなりました。新しい静的ローダー（loader.js）を使用してください。

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

これも

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