如何在x轴上和图表上显示不同的文字，在Google列图中悬停？
如何在x轴上和图表上显示不同的文字，在Google列图中悬停？
提问于 2022-04-26 12:49:04
我想在x轴上显示不同的文本，在工具提示中，我尝试在我的数据中设置tick对象为{v：'2010'，f：'abc'}，但是google列图对轴标签和工具提示都使用'f‘属性。我希望它用“v”表示工具提示，使用“f”表示x轴上的标签。是否有任何可供选择的办法来实现这一目标。下面是我的简单可复制示例。
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
[{v: '2010', f: 'abc'}, 10, 24, 20, 32, 18, 5, ''],
[{v: '2020', f: 'deg'}, 16, 22, 23, 30, 16, 9, ''],
[{v: '2030', f: 'ghi'}, 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
format: function (val) {
console.log('val', val);
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
} <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-26 13:57:57
而不是将字符串用于值：'2010'
您需要使用一个数字：2010
这将允许您自定义选项中的滴答.
hAxis: {
ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}当x轴值是字符串时，hAxis.ticks不工作。
至于工具提示，您可以使用数字值，
但在这里，我包括了对象符号，
因此，工具提示：2,010中没有显示逗号。
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],看下面的工作片段..。
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],
[{v: 2020, f: '2020'}, 16, 22, 23, 30, 16, 9, ''],
[{v: 2030, f: '2030'}, 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72014260
复制相关文章
相似问题
腾讯云开发者
