Google Visualization折线图X轴设为日期后无法显示的问题

我之前踩过完全一样的坑！把X轴从数字改成日期类型后图表直接空白，主要是两个容易忽略的细节：JavaScript Date对象的月份规则，还有图表轴的配置。下面给你一步步解决：

第一坑：JavaScript Date的月份是从0开始的！ #

你写的new Date(2018,1,1)其实是2018年2月1日，不是1月！这会导致你的数据要么超出图表默认显示范围，要么数据点分布异常，直接让图表空白。要表示1月，月份参数得用0，比如new Date(2018,0,1)。这是新手用Date最容易犯的错误，我当初也卡了好久😂

第二点：明确配置日期轴的显示规则 #

即使日期数据正确，有时候需要告诉图表X轴是日期类型，还要设置合适的显示格式，确保图表能正确解析并渲染。

修正后的完整可运行代码 #

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        // 改为date类型的X轴
        data.addColumn('date', 'Day');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');

        // 注意月份用0索引！比如0=1月，1=2月...
        data.addRows([
          [new Date(2018, 0, 1), 1000, 400],
          [new Date(2018, 0, 8), 1170, 460],
          [new Date(2018, 0, 15), 660, 1120],
          [new Date(2018, 0, 22), 1030, 540]
        ]);

        var options = {
          title: 'Sales & Expenses Over Time',
          curveType: 'function',
          legend: { position: 'bottom' },
          // 明确配置日期轴，让图表正确识别
          hAxis: {
            title: 'Date',
            format: 'MMM dd, yyyy', // 自定义日期显示格式，可选
            type: 'date'
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

额外排查小技巧 #

• 打开浏览器控制台（F12）看看有没有报错：如果有无效日期的错误，那肯定是Date实例写错了。
• 检查数据跨度：如果你的日期间隔太大或者数据点太少，图表可能会缩放成空白，调整数据范围试试。
• 确认库加载顺序：必须等google.charts.load完成后再执行绘制函数，这个顺序错了也会导致图表不显示。

按照上面的修改，你的折线图应该就能正常显示日期轴了！

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