S2

提示

在阅读本节内容前，请确保你已经阅读主题配置文档

为方便用户查看数据，S2 交叉表会在滑动过程中，保证行头和列头的最大可见性。因此，S2 在行头、列头对齐方式所对应的的范围是当前格子的可视区域，而角头，数据单元格所对应的范围是当前格子的实际尺寸区域。

角头对齐方式

行头单元格（红色部分）对齐方式受 text 控制
列头单元格（蓝色部分）对齐方式受 bolderText 控制

cornerCell: {
  bolderText: {
    textAlign: 'left',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'left',
    textBaseline: 'middle',
  }
}

cornerCell: {
  bolderText: {
    textAlign: 'center',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'center',
    textBaseline: 'middle',
  }
}

cornerCell: {
  bolderText: {
    textAlign: 'right',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'right',
    textBaseline: 'middle',
  }
}

textBaseline 也有三种模式：top，middle，bottom。效果不再赘述。

行头对齐方式

非叶子节点和小计总计单元格（红色部分）对齐方式受 bolderText 控制
叶子节点单元格（蓝色部分）对齐方式受 text 控制
序号单元格（黄色部分）可单独控制，默认和行头对齐，对齐方式受 seriesText 控制
数值单元格（当数值置于行头时）可单独控制，默认和行头对齐，对齐方式受 measureText 控制

rowCell: {
  bolderText: {
    textAlign: 'left',
  },
  text: {
    textAlign: 'left',
  }
}

rowCell: {
  bolderText: {
    textAlign: 'center',
  },
  text: {
    textAlign: 'center',
  }
}

rowCell: {
  bolderText: {
    textAlign: 'right',
  },
  text: {
    textAlign: 'right',
  }
}

列头对齐方式

其他非叶子维度单元格（红色部分）对齐方式受 bolderText 控制（默认和数据单元格对齐）
数值单元格（蓝色部分，当数值置于列头时）对齐方式受 measureText 控制
叶子维度单元格（黄色部分，当数值置于行头时，或者在列头但隐藏数值列时的最后一个维度）对齐方式受 text 控制

列头的滚动对齐只针对于非叶子维度节点，叶子维度节点对齐对应的范围是当前格子的实际尺寸区域。

colCell: {
  bolderText: {
    textAlign: 'left',
  },
  measureText: {
    textAlign: 'left',
  }
}

colCell: {
  bolderText: {
    textAlign: 'center',
  },
  measureText: {
    textAlign: 'center',
  },
}

colCell: {
  bolderText: {
    textAlign: 'right',
  },
  measureText: {
    textAlign: 'right',
  }
}

数据单元格对齐方式

小计总计单元格（红色部分）对齐方式受 bolderText 控制
其他节点单元格（蓝色部分）对齐方式受 text 控制

dataCell: {
  bolderText: {
    textAlign: 'left',
    textBaseline: 'top',
  },
  text: {
    textAlign: 'left',
    textBaseline: 'top',
  }
}

dataCell: {
  bolderText: {
    textAlign: 'center',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'center',
    textBaseline: 'middle',
  }
}

dataCell: {
   bolderText: {
    textAlign: 'right',
    textBaseline: 'bottom',
  },
  text: {
    textAlign: 'right',
    textBaseline: 'bottom',
  }
}

自定义特定单元格对齐方式

有时我们想达到类似 字段标记 的效果，对特定满足条件的单元格进行 自定义对齐方式, 而不是改变所有，这时我们可以通过 自定义单元格, 通过 S2 提供的 dataCell, colCell, rowCell 等自定义 Hook 来做自定义。

提示

在阅读本节内容前，请确保你已经阅读主题配置文档

角头对齐方式

行头单元格（红色部分）对齐方式受 text 控制
列头单元格（蓝色部分）对齐方式受 bolderText 控制

cornerCell: {
  bolderText: {
    textAlign: 'left',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'left',
    textBaseline: 'middle',
  }
}

cornerCell: {
  bolderText: {
    textAlign: 'center',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'center',
    textBaseline: 'middle',
  }
}

cornerCell: {
  bolderText: {
    textAlign: 'right',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'right',
    textBaseline: 'middle',
  }
}

textBaseline 也有三种模式：top，middle，bottom。效果不再赘述。

行头对齐方式

非叶子节点和小计总计单元格（红色部分）对齐方式受 bolderText 控制
叶子节点单元格（蓝色部分）对齐方式受 text 控制
序号单元格（黄色部分）可单独控制，默认和行头对齐，对齐方式受 seriesText 控制
数值单元格（当数值置于行头时）可单独控制，默认和行头对齐，对齐方式受 measureText 控制

rowCell: {
  bolderText: {
    textAlign: 'left',
  },
  text: {
    textAlign: 'left',
  }
}

rowCell: {
  bolderText: {
    textAlign: 'center',
  },
  text: {
    textAlign: 'center',
  }
}

rowCell: {
  bolderText: {
    textAlign: 'right',
  },
  text: {
    textAlign: 'right',
  }
}

列头对齐方式

其他非叶子维度单元格（红色部分）对齐方式受 bolderText 控制（默认和数据单元格对齐）
数值单元格（蓝色部分，当数值置于列头时）对齐方式受 measureText 控制
叶子维度单元格（黄色部分，当数值置于行头时，或者在列头但隐藏数值列时的最后一个维度）对齐方式受 text 控制

列头的滚动对齐只针对于非叶子维度节点，叶子维度节点对齐对应的范围是当前格子的实际尺寸区域。

colCell: {
  bolderText: {
    textAlign: 'left',
  },
  measureText: {
    textAlign: 'left',
  }
}

colCell: {
  bolderText: {
    textAlign: 'center',
  },
  measureText: {
    textAlign: 'center',
  },
}

colCell: {
  bolderText: {
    textAlign: 'right',
  },
  measureText: {
    textAlign: 'right',
  }
}

数据单元格对齐方式

小计总计单元格（红色部分）对齐方式受 bolderText 控制
其他节点单元格（蓝色部分）对齐方式受 text 控制

dataCell: {
  bolderText: {
    textAlign: 'left',
    textBaseline: 'top',
  },
  text: {
    textAlign: 'left',
    textBaseline: 'top',
  }
}

dataCell: {
  bolderText: {
    textAlign: 'center',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'center',
    textBaseline: 'middle',
  }
}

dataCell: {
   bolderText: {
    textAlign: 'right',
    textBaseline: 'bottom',
  },
  text: {
    textAlign: 'right',
    textBaseline: 'bottom',
  }
}

S2

自定义单元格对齐方式

S2

自定义单元格对齐方式

提示

角头对齐方式

行头对齐方式

列头对齐方式

数据单元格对齐方式

自定义特定单元格对齐方式

提示

角头对齐方式

行头对齐方式

列头对齐方式

数据单元格对齐方式

自定义特定单元格对齐方式