刚好之前处理过类似的财年图表排序需求，给你一套实用的解决方案，核心就是根据用户选择的年份类型，动态切换X轴的月份顺序～

核心思路 #

我们需要给日历年和财年分别定义一套月份排序规则，然后监听用户的选择，把对应规则应用到图表的X轴上，替换默认的1-12月排序逻辑。

具体实现步骤 #

• 第一步：提前准备两种月份顺序
  先把两种模式下的月份顺序存成数组，不管是用数字还是月份名称都可以：

  // 日历年：1-12月（数字版）
  const calendarMonthOrder = [1,2,3,4,5,6,7,8,9,10,11,12];
  // 财年：7月起步，到次年6月（数字版）
  const fiscalMonthOrder = [7,8,9,10,11,12,1,2,3,4,5,6];
  
  // 如果用月份名称展示的话，就换成对应的数组
  const calendarMonthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  const fiscalMonthNames = ["Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun"];
  

• 第二步：监听用户的年份类型选择
  给你的财年/日历年选择器加个监听事件，选中后立刻切换对应的月份顺序：

  // 假设你的选择器ID是yearTypeSelector
  const yearTypePicker = document.getElementById('yearTypeSelector');
  
  yearTypePicker.addEventListener('change', function() {
    const selectedType = this.value; // 假设值是"calendar"或"fiscal"
    // 根据选择拿到目标月份顺序
    const targetOrder = selectedType === 'fiscal' ? fiscalMonthOrder : calendarMonthOrder;
    
    // 调用更新图表的函数，把新顺序传进去
    updateChartXAxis(targetOrder);
  });
  

• 第三步：更新图表X轴的排序
  这里给你举两个常用图表库的例子，其他工具逻辑类似：

  • Chart.js 版本：
    直接替换图表的labels为目标顺序，然后更新图表就行：

    function updateChartXAxis(monthOrder) {
      // 假设你的图表实例是myLineChart
      myLineChart.data.labels = monthOrder.map(month => `${month}月`); // 转成带"月"的标签
      myLineChart.update();
    }
    

  • ECharts 版本：
    通过setOption修改X轴的data属性：

    function updateChartXAxis(monthOrder) {
      const myChart = echarts.getInstanceByDom(document.getElementById('chartContainer'));
      myChart.setOption({
        xAxis: {
          data: monthOrder.map(month => `${month}月`)
        }
      });
    }
    

• 第四步：别忘了同步数据顺序
  如果你的原始同比数据是按1-12月存的，那切换到财年模式时，得把数据也重新排序，保证和X轴对应上：

  // rawData是按1-12月排列的数组：[1月数据, 2月数据, ..., 12月数据]
  function getReorderedData(rawData, monthOrder) {
    // 根据月份顺序从原始数据里取对应的值
    return monthOrder.map(month => rawData[month - 1]);
  }
  

给BI工具用户的额外提示 #

如果用的是Tableau、Power BI这类可视化工具，不用写代码也能搞定：
比如在Tableau里，你可以创建一个计算字段，根据选中的年份类型生成排序值：

IF [年份类型] = "财年" THEN
  IF [月份] >=7 THEN [月份] -6 ELSE [月份] +6 END
ELSE
  [月份]
END

然后把这个计算字段拖到X轴的排序设置里，选升序，就能自动实现财年从7月开始排序啦～

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