In the previous section (#12.1 VChart Plugin Mechanism), the basic usage of plugins in VChart was introduced. In this section, I will delve into the source code to explore the implementation logic of various plugins in depth;

Relevant Source Code Locations

• packages/vchart/src/plugin/chart/formatter/ : Core implementation of the formatting plugin

• packages/vchart/src/plugin/chart/media-query/ : Core implementation of the media query plugin

Formatting Plugin

Numerical Text Formatting

  protected _formatSingleText(text: string | number, formatter: string): string | number {
    const isNumeric = numberSpecifierReg.test(formatter);
    if (isNumeric && this._numericFormatter) {
      // 内置的 formatter 逻辑，可以进行缓存性能优化
      let numericFormat;
      if (this._numericFormatterCache && this._numericSpecifier) {
        if (this._numericFormatterCache.get(formatter)) {
          numericFormat = this._numericFormatterCache.get(formatter);
        } else {
          numericFormat = this._numericSpecifier(formatter) as any;
          this._numericFormatterCache.set(formatter, numericFormat);
        }
        return numericFormat(Number(text));
      }
      return this._numericFormatter(formatter, Number(text));
    } else if (formatter.includes('%') && this._timeFormatter) {
      return this._timeFormatter(formatter, text);
    }
    return text;
  }
    

Time Text Formatting

VChart for time format conversion in

private readonly _timeModeFormat = {
  utc: TimeUtil.getInstance().timeUTCFormat,
  local: TimeUtil.getInstance().timeFormat
};

// 在 onInit 中设置时间格式化器
onInit(service: IChartPluginService, chartSpec: any) {
  const { timeMode, timeFormatter } = this._spec;
  
  if (isFunction(timeFormatter)) {
    // 使用自定义时间格式化函数
    this._timeFormatter = timeFormatter;
  } else if (timeMode && this._timeModeFormat[timeMode]) {
    // 使用内置的 UTC 或本地时间格式化
    this._timeFormatter = this._timeModeFormat[timeMode];
  }
}

// 在 _formatSingleText 中处理时间格式化
protected _formatSingleText(text: string | number, formatter: string): string | number {
  // 数值格式化逻辑...

  // 时间格式化逻辑
  else if (formatter.includes('%') && this._timeFormatter) {
    return this._timeFormatter(formatter, text);
  }
  
  return text;
}    

Data Variable Replacement

• Template Parsing:

• Use regular expression /\{([^}]\u002B)\}/g to match curly brace templates

• Support nested format definitions (e.g., {field:format})

• Field Extraction:

• Split field name and format specification with a colon (field:format)

• Dynamic Replacement:

• Extract corresponding field values from the data object datum

• Recursively apply format specifications for secondary formatting

Media-query Plugin

This document was revised and organized by the following person

玄魂