Google vAxis в формате диаграммы не отображает% правильно - PullRequest
Новая
       5

Google vAxis в формате диаграммы не отображает% правильно

1 голос
/ 06 февраля 2020

пожалуйста, найдите мой код, чтобы иметь гугловую диаграмму здесь: 

<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 диаграмма здесь

Я хочу отображать метки на vAxis as 0%, 5%, 10% до 20%. Так, согласно документации по визуализации Google , я указал vAxis: {format: '#, ###%'}

, но теперь он начал показывать метки, такие как 0%, 500%, 1000%, 1500% и 2000%, как вы можете видеть в моем коде выше.

Может кто-нибудь предложить мне правильный путь?

1 Ответ

0 голосов
/ 06 февраля 2020

опция формата предполагает, что число уже является процентом

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

см. Следующий рабочий фрагмент ... 

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>
...