You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用Google App Code切换嵌入式图表的坐标轴

切换Google嵌入式图表的横纵轴显示
  • 核心是调整数据列顺序和图表配置,新手可以按以下步骤操作:
    1. 调换数据源的列顺序
      原来你把列数据放在对应横轴(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']]);
      
    2. 调整图表轴配置(按需)
      • 如果用的是柱状图(ColumnChart),想直接把纵向柱子改成横向,可在配置里加orientation: 'horizontal':
        var options = {
          hAxis: { title: '日期' },
          vAxis: { title: '列数据' },
          orientation: 'horizontal'
        };
        
      • 如果是折线图、散点图这类,只要数据列顺序对了,轴会自动切换,不需要额外配置。
    3. 确认图表初始化绑定
      确保初始化图表时用的是修改后的DataTable,比如:
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
      

内容的提问来源于stack exchange,提问作者Kev

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 09:45:36