是否可以使列的正数下降?
我需要创建一个以100%为基数的条形图,低于100%的条形图将下降,而高于100%的那些条形图将上升,所有值均为正。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function init() {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'grafico'
});
}
function grafico() {
var dados = <?php echo $dadosGrafico; ?>;
var data = google.visualization.arrayToDataTable(dados);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}
]);
var options = {
title: 'Percent state',
vAxis: {
title: 'Percent %',
},
hAxis: {
title: 'State',
textStyle: {
fontSize: 12,
},
},
chartArea: {
bottom: 300,
left: 200,
top: 90,
width: 1200,
},
legend: 'bottom',
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}
</script>
来自银行的数据将采用这种格式。
$data = [
[
'Group', 'Percent'
],
[
'19', 78.011
],
[
'20', 120.4
],
[
'21', 94.996
],
[
'22', 100
],
];
我正在使用旧版的Google图表。
简单,将y轴基线设置为100。
使用配置选项...
vAxis: {
baseline: 100,
}
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(grafico);
function grafico() {
var dados = [
[
'Group', 'Percent'
],
[
'19', 78.011
],
[
'20', 120.4
],
[
'21', 94.996
],
[
'22', 100
],
];;
var data = google.visualization.arrayToDataTable(dados);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}
]);
var options = {
title: 'Percent state',
vAxis: {
baseline: 100,
title: 'Percent %',
},
hAxis: {
title: 'State',
textStyle: {
fontSize: 12,
},
},
chartArea: {
bottom: 300,
left: 200,
top: 90,
width: 1200,
},
legend: 'bottom',
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}
#chart {
height: 600px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
NOTE:
jsapi
加载程序已过时,不应再使用。
而是使用loader.js
,这只会更改load
语句。参见上面的代码段...