Google Charts：如何取消X轴默认排序并按1-12月顺序显示？

当然可以搞定这个问题！Google Charts默认会对字符串类型的X轴数据按字母顺序排序，所以如果你的数据里有April（A开头），它就会跑到January（J开头）前面，这显然不是你要的月份顺序。结合你已经用PHP补全了所有缺失月份的数据（这点非常关键，保证了数据的完整性），我们可以通过两种方式来实现自定义排序：

方法一：使用自定义排序函数（推荐，直接用月份名称） #

这个方法不需要修改你的原始数据结构，直接在图表配置里指定排序规则：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 定义月份的优先级顺序：给每个月份分配对应的数字排序值
  const monthSortOrder = {
    "January": 1,
    "February": 2,
    "March": 3,
    "April": 4,
    "May": 5,
    "June": 6,
    "July": 7,
    "August": 8,
    "September": 9,
    "October": 10,
    "November": 11,
    "December": 12
  };

  // 你的完整数据（已通过PHP补全所有月份）
  const rawData = [
    ["Month", "Value", "Product", "Year", "Type"],
    ["January",0,"Apitong","2018","Analog"],
    ["January",0,"Apitong","2018","Digital"],
    ["January",0,"Apitong","2018","Internet"],
    ["February",0,"Apitong","2018","Analog"],
    ["February",0,"Apitong","2018","Digital"],
    // 其他月份的数据...
  ];

  const dataTable = google.visualization.arrayToDataTable(rawData);

  const chartOptions = {
    hAxis: {
      title: "Month",
      // 自定义X轴排序函数：根据我们定义的优先级比较两个月份
      sortingFunction: function(monthA, monthB) {
        return monthSortOrder[monthA] - monthSortOrder[monthB];
      }
    },
    // 其他图表样式配置，比如颜色、图例等
    legend: { position: 'top' },
    height: 400
  };

  // 初始化图表（这里以柱状图为例，你可以换成自己需要的图表类型）
  const chart = new google.visualization.ColumnChart(document.getElementById('chart-container'));
  chart.draw(dataTable, chartOptions);
}

原理说明： #

• monthSortOrder对象给每个月份映射了一个数字，代表它在1-12月中的位置。
• hAxis.sortingFunction会接收X轴的两个值（这里是月份名称），通过比较它们对应的数字差值，来决定排序顺序——差值为负则A排在B前面，正则相反，完美实现1月到12月的顺序。

方法二：将月份转换为数字，自定义X轴标签 #

如果你愿意稍微调整数据结构，也可以把月份换成数字（1代表January，2代表February...），然后在X轴上显示对应的月份名称，这样Google Charts会默认按数字顺序排序，更简单：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 修改后的数据：月份用数字1-12表示
  const rawData = [
    ["Month", "Value", "Product", "Year", "Type"],
    [1,0,"Apitong","2018","Analog"],
    [1,0,"Apitong","2018","Digital"],
    [2,0,"Apitong","2018","Analog"],
    // 其他月份的数据...
  ];

  const dataTable = google.visualization.arrayToDataTable(rawData);

  const chartOptions = {
    hAxis: {
      title: "Month",
      // 自定义X轴刻度标签：把数字映射回月份名称
      ticks: [
        {v: 1, f: "January"},
        {v: 2, f: "February"},
        {v: 3, f: "March"},
        {v: 4, f: "April"},
        {v: 5, f: "May"},
        {v: 6, f: "June"},
        {v: 7, f: "July"},
        {v: 8, f: "August"},
        {v: 9, f: "September"},
        {v: 10, f: "October"},
        {v: 11, f: "November"},
        {v: 12, f: "December"}
      ]
    },
    // 其他配置...
  };

  const chart = new google.visualization.ColumnChart(document.getElementById('chart-container'));
  chart.draw(dataTable, chartOptions);
}

优点： #

• 不需要写自定义排序函数，利用数字的自然排序特性就能实现需求。
• 数据结构更简洁，适合后续可能的统计计算。

两种方法都能完美解决你的问题，根据自己的代码习惯选择就好啦！因为你已经补全了所有月份的数据，所以不管用哪种方法，X轴都会完整显示12个月，不会出现顺序错乱的情况。

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