Google 图表 vAxis 格式未正确显示 %答案

【问题标题】：Google chart vAxis format not displaying % properlyGoogle 图表 vAxis 格式未正确显示 %
【发布时间】：2020-02-06 17:12:15
【问题描述】：

请在此处找到我的代码以获得 google 柱形图：

<html>
   <head>
      <title>Test</title>
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
      <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>

   </head>
   <body>
      <!-- detail section start -->
    <section class='section-padding'>
        <div class='container'>
            <div class='row'>
                <div class='col-12'>
                    <div>
                        <h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
                    </div>
                </div>
            </div>
            <div class='row'>
                <div class='col-lg-12'>
                    <!-- start:: Chart card -->
                    <div class='card-blk chart-card d-flex flex-column'>
                        <div class='card flex-grow-3'>
                            <div class='card-title'>
                                <h6 class='text-center'>
                                    Customers
                                </h6>
                            </div>
                            <div class='card-content text-center'>
                                <div id='chartElement3'>

<script type='text/javascript'>

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);

function drawElement3Dashboard() {
    var data = new google.visualization.DataTable();
    data.addColumn('string','customer_profile_value');
    data.addColumn('number','Current Turnover');
    data.addColumn({type:'string', role:'annotation'});
    data.addColumn('number','Last year Turnover');
    data.addColumn({type:'string', role:'annotation'});
    data.addRows([['A+',19.9, '19.9%', 18.2, '18.2%'],['A',5.5, '5.5%', 5.4, '5.4%'],['B',2.4, '2.4%', 2.3, '2.3%'],['C',1.0, '1.0%', 1.0, '1.0%'],['C-',0.3, '0.3%', 0.3, '0.3%']]);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
    var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
    var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
    'height': 150,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'#,###%','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
    dashboard.bind(controller, colChart);
    dashboard.draw(data);
}
</script>

<div id='dashboard_div_3'>
                                        <div id='filter_div_3' style='display: none;'></div>
                                        <div id='chart_div_3'>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h6 class='card-subtitle'>
                            User: Company name
                        </h6>
                    </div>
                    <!-- end:: Chart card -->
                </div>
            </div>
            <!-- Start:: Copyright and page text -->
            <div class='row mt-auto pt-3'>
                <div class='col-12'>
                    <div class='copyright-text d-flex justify-content-between'>
                        <span>Company Name</span>
                        <span>Page 1</span>
                    </div>
                </div>
            </div>
            <!-- End:: Copyright and page text -->
        </div>
    </section>
    <!-- detail section end -->
   </body>
</html>

我的工作 HTML 图表是here

我想在 vAxis 上将标签显示为 0%、5%、10% 直到 20%。所以按照Google visualization documentation，我指定了 vAxis:{format:'#,###%'}

但现在它开始显示0%、500%、1000%、1500% 和 2000% 等标签，正如您在上面的代码中看到的那样。

谁能建议我正确的方法？

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

格式选项假定数字已经是百分比

19.9 = 1,990%

如果您想使用格式选项，
这些值需要除以 100

0.199 = 19.9%

否则，您可以为 y 轴使用自定义刻度。
我们可以使用对象表示法提供刻度的值和格式化值。

{v: 20, f: '20%'}

我们也可以动态构建它们，使用数据表的方法 --> getColumnRange(colIndex)

// build y-axis ticks
var formatPercent = new google.visualization.NumberFormat({
  pattern: '#,##0%'
});
var range = data.getColumnRange(1);
var ticks = [];
for (var i = Math.floor(range.min); i <= Math.ceil(range.max); i = i + 5) {
  addTick(i);
}
function addTick(y) {
  ticks.push({v: y, f: formatPercent.formatValue(y / 100)});
}

请参阅以下工作 sn-p...

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);

function drawElement3Dashboard() {
	var data = new google.visualization.DataTable();
	data.addColumn('string','customer_profile_value');
	data.addColumn('number','Current Turnover');
	data.addColumn({type:'string', role:'annotation'});
	data.addColumn('number','Last year Turnover');
	data.addColumn({type:'string', role:'annotation'});
	data.addRows([['A+',19.9, '19.9%', 18.2, '18.2%'],['A',5.5, '5.5%', 5.4, '5.4%'],['B',2.4, '2.4%', 2.3, '2.3%'],['C',1.0, '1.0%', 1.0, '1.0%'],['C-',0.3, '0.3%', 0.3, '0.3%']]);

	// build y-axis ticks
  var formatPercent = new google.visualization.NumberFormat({
    pattern: '#,##0%'
  });
  var range = data.getColumnRange(1);
  var ticks = [];
  for (var i = Math.floor(range.min); i <= Math.ceil(range.max); i = i + 5) {
    addTick(i);
  }
  function addTick(y) {
    ticks.push({v: y, f: formatPercent.formatValue(y / 100)});
  }

	var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
	var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
	var colChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart_div_3',
    'options': {
      'height': 150,
    'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
    'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
    'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
    'enableInteractivity' :'true',
    'forceIFrame' :'false',
    'reverseCategories' :'false',
    'tooltip' :'',
    'slices' :'10',
    'animation': { 'duration' :'2000',
    'easing' :'linear',
    'startup' :'true',
    'alwaysOutside' :'',},
    'bar': { 'groupWidth' :'61.8%',},
    'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
    'isStacked' :'false',
    'orientation' :'horizontal',
    'vAxis': { 'direction' :'1','ticks' :ticks,'gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
  }});
	dashboard.bind(controller, colChart);
	dashboard.draw(data);
}

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

【讨论】：