请在我的代码中找到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%
之类的标签,如您在上面的代码中所见。
有人可以建议我正确的方法吗?
格式选项假定数字已经是一个百分比
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>