通过wpDataTables自定义Google Charts横轴刻度/日期

前提确认 #

先确保满足两个基础条件：

• 在wpDataTables的表格编辑页面，把横轴对应的列设置为**「Date/Time」类型**，并匹配你的数据日期格式（比如YYYY-MM-DD）
• 保留你之前写好的、解决填充占比和tooltip问题的回调代码部分

正确的回调函数写法 #

打开wpDataCharts的图表编辑页面，找到「自定义JavaScript回调」输入框（通常在「高级」或「自定义代码」标签下），替换成以下代码（根据你的需求修改日期）：

function(wpDataChart, google) {
  // 初始化横轴配置（避免原配置为空导致报错）
  var options = wpDataChart.options;
  options.hAxis = options.hAxis || {};
  
  // 自定义横轴日期刻度，按需求修改下面的日期
  options.hAxis.ticks = [
    new google.visualization.Date(new Date(2024, 0, 1)), // 2024年1月1日（注意月份从0开始）
    new google.visualization.Date(new Date(2024, 1, 1)), // 2024年2月1日
    new google.visualization.Date(new Date(2024, 2, 1))  // 2024年3月1日
  ];
  
  // 保留你之前的配置（比如填充占比、tooltip设置），示例：
  // options.chartArea = {width: '90%', height: '70%'};
  // options.tooltip = {isHtml: true, trigger: 'both'};
  
  // 更新图表配置
  wpDataChart.options = options;
}

关键注意点 #

• 月份是0开始的：1月对应0，12月对应11，这是最容易犯的错误
• 必须用google.visualization.Date包裹普通Date对象，Google Charts的日期轴只识别这种类型的日期值
• 不要删除你之前写好的解决填充和tooltip的代码，把它们保留在回调函数里（示例中注释的部分）

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