Google Charts设置日期格式后X轴出现额外值问题咨询

问题场景 #

使用Google Charts创建折线图时，遇到两个矛盾的问题：

• 配置hAxis.format: 'MMM yy'后，X轴左侧会出现一个额外的数值标签
• 移除该格式配置，X轴条目数量恢复正确，但第一个数据点的日期会显示完整格式（而非预期的月年简化格式）

解决方案 #

通过手动指定X轴的ticks（刻度），精准控制要显示的日期标签，同时保留自定义格式配置，即可同时解决两个问题。

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>My Line Chart</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      function createLineGraph(id,title) {
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
              var data = new google.visualization.DataTable();
              data.addColumn('date', 'X(Years)')
              data.addColumn('number', 'Y')
              data.addColumn({type: 'string', role: 'annotation'})
              data.addColumn('number', 'Y1')
              data.addColumn({type: 'string', role: 'annotation'})

              // 提取数据并单独存储，方便后续生成刻度
              const rowData = [
                [new Date('2021-02-03'), 2, null,5,null],
                [new Date('2021-02-04'), 3, null,15,null],
                [new Date('2021-02-05'), 4, null,25,null],
                [new Date('2021-02-06'), 5, '5',12,'12']
              ];
              data.addRows(rowData);

              // 从数据中提取日期，作为自定义X轴刻度
              const axisTicks = rowData.map(item => item[0]);

              var options = {
                  title: title,
                  hAxis: {
                     format: 'MMM yy',
                     ticks: axisTicks // 指定仅使用数据中的日期作为刻度
                  },
                  titleTextStyle: {
                      fontSize: 18,
                      bold: true,
                      textAlign: 'center'
                  },
                  titlePosition: 'none',
                  curveType: 'none',
                  legend: { position: 'none' },
                  pointSize:0,
                  displayLegendValues:false,
                  annotations: {
                    stem: {
                      color: 'transparent'
                    },
                    alwaysOutside: false,
                    textStyle: {
                        fontSize: 12,
                        color: '#000',
                        auraColor: 'none'
                    }
                  }
              };

              var chart = new google.visualization.LineChart(document.getElementById(id));
              chart.draw(data, options);
        } 
      }
    </script>
    <script type="text/javascript">      
      createLineGraph('chart_div','Support')
      createLineGraph('chart_div1','Resistance')
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row text-center">
        <div class="col-md-5">
          <h4>Support</h4>          
          <div id="chart_div"></div>
        </div>
        <div class="col-md-5">
          <h4>Resistance </h4>          
          <div id="chart_div1"></div>
        </div>
      </div>
    </div>    
  </body>
</html>

关键修改说明 #

1. 将数据单独存储为rowData变量，便于后续提取日期
2. 通过rowData.map(item => item[0])生成仅包含数据中日期的ticks数组
3. 在hAxis配置中添加ticks: axisTicks，强制X轴仅使用数据内的日期作为刻度标签，避免自动生成多余的刻度
4. 保留hAxis.format: 'MMM yy'，确保所有日期标签都以指定的月年格式展示

最终效果 #

修改后，X轴会准确显示4个数据对应的日期标签，每个标签均以MMM yy格式（如Feb 21）展示，不会出现左侧的额外数值，同时日期格式完全符合预期。

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