如何在Google Charts中将CSV日期数据按年月分组显示X轴？

加载包含日期与行情数据的CSV文件（示例含数月记录）时，第一列日期被Google Charts识别为字符串，当前生成的蜡烛图X轴显示每日日期，需将X轴按月份或年份分组展示。

CSV示例数据 #

timestamp,open,high,low,close
2022-08-03,1.01554,1.02105,1.01210,1.01618
2022-08-02,1.02578,1.02939,1.01619,1.01625
2022-08-01,1.02182,1.02753,1.02040,1.02587
2022-07-29,1.01952,1.02544,1.01440,1.02248
2022-07-28,1.02005,1.02344,1.01120,1.01947
2022-07-27,1.01174,1.02209,1.00950,1.01998
2022-07-26,1.02210,1.02502,1.01060,1.01179
2022-07-25,1.02174,1.02579,1.01770,1.02200

当前使用的HTML代码 #

<!DOCTYPE html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="jquery.csv-0.71.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>

<script>
function drawVisualization() {
   $.get("EURUSD.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);
      var view = new google.visualization.DataView(data);
      //view.setColumns([0,1]);

        var options = {
          legend: 'none',
          title: 'EURUSD',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
          }
        };

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
        data.sort({column: 0, asc: true});
        chart.draw(data, options);

   });
}
google.setOnLoadCallback(drawVisualization)
</script>

 <div id="chart_div" style="width: 900px; height: 500px;"></div>

解决方法 #

要实现X轴按月份/年份分组，需完成两个核心步骤：将字符串日期转为Google Charts可识别的日期类型，再配置轴的刻度规则。

1. 转换日期类型 #

Google Charts无法自动识别字符串格式的日期，需手动将CSV中的日期字符串转为Date对象，确保DataTable将其标记为日期维度。修改CSV解析后的数组处理逻辑：

// 遍历数组，将第一列的日期字符串转为Date对象（跳过表头行）
for (var i = 1; i < arrayData.length; i++) {
  arrayData[i][0] = new Date(arrayData[i][0]);
}

2. 配置X轴分组展示 #

在options中添加hAxis配置，指定按月份分组的刻度格式与间隔：

hAxis: {
  format: 'yyyy-MM', // 主刻度显示格式：年月
  gridlines: {
    count: -1, // 根据数据自动计算合适的刻度数量
    units: {
      months: {format: ['MMM yyyy']} // 主刻度显示为「月份缩写+年份」
    }
  },
  // 可选：保留日级别的小刻度，仅主刻度按月份分组
  minorGridlines: {
    units: {
      days: {format: ['dd']}
    }
  }
}

修改后的完整代码 #

<!DOCTYPE html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="jquery.csv-0.71.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
</script>

<script>
function drawVisualization() {
   $.get("EURUSD.csv", function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      
      // 转换日期字符串为Date对象
      for (var i = 1; i < arrayData.length; i++) {
        arrayData[i][0] = new Date(arrayData[i][0]);
      }

      var data = new google.visualization.arrayToDataTable(arrayData);
      data.sort({column: 0, asc: true});

      var options = {
        legend: 'none',
        title: 'EURUSD',
        bar: { groupWidth: '100%' },
        candlestick: {
          fallingColor: { strokeWidth: 0, fill: '#a52714' },
          risingColor: { strokeWidth: 0, fill: '#0f9d58' }
        },
        // 配置X轴按月份分组
        hAxis: {
          format: 'yyyy-MM',
          gridlines: {
            count: -1,
            units: {
              months: {format: ['MMM yyyy']}
            }
          }
        }
      };

      var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
      chart.draw(data, options);
   });
}
</script>

 <div id="chart_div" style="width: 900px; height: 500px;"></div>

说明 #

• 日期转换后，Google Charts会将第一列识别为日期类型，而非字符串，为轴分组提供基础。
• 通过hAxis.units指定主刻度为月份，图表会自动按月份聚合显示刻度，不会再逐个显示每日日期。
• 若需按年份分组，只需将units中的months替换为years，并调整对应格式即可。

内容的提问来源于stack exchange，提问作者carlolab