Googleチャットで注文を変更せずにパーセンテージラベルを追加する方法

Question

ナンバーラベルにパーセンテージマークを追加して、そのオプションが見つかりました。

{hAxis: {format: 'percent'}} 

また、100の倍数です。例えば

、{hAxis：{形式： '＃、％は###'}}の値10は "1000パーセント"、 "750パーセント"、および "50％" の値を表示し、7.5 、および0.5。

https://developers.google.com/chart/interactive/docs/customizing_axes#number-formats

どのように私は、ラベルに%を追加することができますか？

Answer 1

オブジェクトの表記法を使用して...

カスタム軸ラベル、またはticksを追加してみてください、あなたは...

値（v:）とフォーマットされた値の両方を提供できる可能性を（f:）

その後、手動で各 tick構築するGoogleの NumberFormatクラスを使用して

...

var formatPercent = new google.visualization.NumberFormat({ 
    suffix: '%' 
}); 

...

ticks.push({ 
    v: data.getValue(i, 0), 
    f: formatPercent.formatValue(data.getValue(i, 0)) 
}); 

...

hAxis: { 
    ticks: ticks 
} 

---

作業スニペット以下を参照してください...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['X', 'Y'], 
 
    [1, 1], 
 
    [10, 2], 
 
    [20, 3], 
 
    [30, 4] 
 
    ]); 
 

 
    var formatPercent = new google.visualization.NumberFormat({ 
 
    pattern: '#,##0', 
 
    suffix: '%' 
 
    }); 
 

 
    var ticks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    ticks.push({ 
 
     v: data.getValue(i, 0), 
 
     f: formatPercent.formatValue(data.getValue(i, 0)) 
 
    }); 
 
    } 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
    hAxis: { 
 
     ticks: ticks 
 
    } 
 
    }); 
 
}

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