Google Charts显示选项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Google Charts显示选项相关的知识，希望对你有一定的参考价值。
我的问题（简短风格）
- 您可以自定义y轴标记间隔吗？
- 您能否将系列的极值显示为水平线？
详细解释
我有一个用Google Charts制作的组合图表：第一组数据使用区域样式，第二组数据使用线条样式。第二个是这里重要的一个：
- 它代表一个百分比
- 我不希望它从0到1（或0到100的百分比），但从它的最小值到最大值（或接近）
- 我想显示那些最小值和最大值
如果我修改比例所以：
$min_reject_percentage = 5 * floor($min_reject_percentage / 5);
$max_reject_percentage = 5 * ceil($max_reject_percentage / 5);
JS
var options = {
...
vAxes: {
...
1: {
format:"##%",
viewWindow: {
min: <?php echo ($min_taux_rejet / 100); ?>,
max: <?php echo ($max_taux_rejet / 100); ?>,
},
},
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
targetAxisIndex: 1,
type: 'line',
},
}
}
对于最小值和最大值，垂直轴限制为最接近的5的倍数，但是：
- 轴上显示的间隔为10到10，太大了。由于我的实际最大值为31.5，实际最小值为17.1，因此轴最小值15为15，轴最大值为35，但标记的唯一刻度为20和30。
- 我无法在图表上看到真实的最小值和最大值
答案
你可以使用配置选项ticks，这是一个用于标签的值数组......
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
[0, 18, 0.171],
[1, 28, 0.315],
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var axisMin = 0.15;
var axisMax = 0.35;
var ticks = [];
for (var i = axisMin; i <= axisMax; i = i + 0.05) {
ticks.push(i);
}
var options = {
vAxes: {
1: {
format: '##%',
ticks: ticks,
viewWindow: {
min: axisMin,
max: axisMax,
},
},
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
targetAxisIndex: 1,
type: 'line',
},
}
};
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>以上是关于Google Charts显示选项的主要内容，如果未能解决你的问题，请参考以下文章
Google Charts 折线图未显示 0-100 作为百分比刻度