如何使用Google App Code切换嵌入式图表的坐标轴
切换Google嵌入式图表的横纵轴显示
- 核心是调整数据列顺序和图表配置,新手可以按以下步骤操作:
- 调换数据源的列顺序
原来你把列数据放在对应横轴(h轴)的第一列,日期数据(day=ta)放在纵轴(v轴)的第二列,现在把日期移到第一列,列数据放到第二列。示例代码:// 原数据结构 var data = new google.visualization.DataTable(); data.addColumn('string', '列数据'); // 对应h轴 data.addColumn('date', '日期'); // 对应v轴 data.addRows([['列1', new Date(2024, 5, 1)], ['列2', new Date(2024, 5, 2)]]); // 修改后的数据结构 var data = new google.visualization.DataTable(); data.addColumn('date', '日期'); // 现在对应h轴 data.addColumn('string', '列数据'); // 现在对应v轴 data.addRows([[new Date(2024, 5, 1), '列1'], [new Date(2024, 5, 2), '列2']]); - 调整图表轴配置(按需)
- 如果用的是柱状图(ColumnChart),想直接把纵向柱子改成横向,可在配置里加
orientation: 'horizontal':var options = { hAxis: { title: '日期' }, vAxis: { title: '列数据' }, orientation: 'horizontal' }; - 如果是折线图、散点图这类,只要数据列顺序对了,轴会自动切换,不需要额外配置。
- 如果用的是柱状图(ColumnChart),想直接把纵向柱子改成横向,可在配置里加
- 确认图表初始化绑定
确保初始化图表时用的是修改后的DataTable,比如:var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options);
- 调换数据源的列顺序
内容的提问来源于stack exchange,提问作者Kev
相关产品推荐
相关产品推荐

