基于动态时长单位的折线图渲染适配技术问询

需求说明 #

• 根据Y轴数据的最大值，自动选择最合适的单位（Hours/Days/Months），为所有时长数据添加对应后缀
• 注意：context.raw中的原始数据可能以天、小时或月为单位，例如：2.4（天）、7（小时）、3（月）

修改后的实现代码 #

prTimeToMergeChartOptions: any = comboChartOptions;

prTimeToMergeChartsOptions() {
  // 遍历所有数据集，获取Y轴数据的最大值（需根据实际数据结构调整取值逻辑）
  const allValues = this.prTimeToMergeChartOptions.data.datasets.flatMap(dataset => dataset.data);
  const maxValue = Math.max(...allValues);

  // 根据最大值确定目标单位及转换系数
  let unit = 'days';
  let conversionFactor = 1;

  if (maxValue >= 30) { // 可根据业务需求调整月/天的阈值
    unit = 'months';
    conversionFactor = 1 / 30; // 天转月
  } else if (maxValue < 1) {
    unit = 'hours';
    conversionFactor = 24; // 天转小时
  }
  // 若原始数据混合多单位，需先统一转换为天再执行上述判断

  // 更新X/Y轴标题，补充单位说明
  this.prTimeToMergeChartOptions.scales.x.title.text = "duration";
  this.prTimeToMergeChartOptions.scales.y.title.text = `Average time taken to merge pull request (${unit})`;

  // 配置tooltip动态格式化逻辑
  this.prTimeToMergeChartOptions.plugins = {
    tooltip: {
      callbacks: {
        title: (data) => { 
          const date = `${this.translation.translate("developmentMetrics.date")}: ${data[0].label}`;
          return date;
        },
        label: (context: any) => {
          let tooltipLines = [];
          const datasetLabel = context.dataset.label.toLowerCase();

          if (datasetLabel !== 'average') {
            const appName = `${this.translation.translate("developmentMetrics.application")}: ${context.dataset.label}`;
            tooltipLines.push(appName);
          }

          // 转换原始数值到目标单位
          const convertedValue = context.raw * conversionFactor;
          // 根据单位格式化显示文本
          let displayValue: string;
          switch(unit) {
            case 'months':
              displayValue = `${convertedValue.toFixed(1)} months`;
              break;
            case 'hours':
              displayValue = `${convertedValue.toFixed(1)} hours`;
              break;
            default:
              displayValue = `${convertedValue.toFixed(1)} days`;
          }

          const yAxisLabel = datasetLabel === 'average' 
                            ? "Average Time to merge" 
                            : "Time to merge";
          const changed = `${yAxisLabel}: ${displayValue}`;
          tooltipLines.push(changed);

          return tooltipLines;
        }
      }
    }
  };
}

关键逻辑说明 #

• 最大值判断：遍历所有数据集获取Y轴最大值，通过阈值自动选择最优显示单位
• 数值统一转换：用转换系数将所有原始数值转为目标单位，保证显示单位一致
• 动态同步更新：Y轴标题补充单位说明，tooltip自动套用选定单位格式化数值

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