Chart.js 坐标轴居中定位指南将轴放置在图表中心【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js本指南围绕 Chart.js 官方示例 docs/samples/scale-options/center.md 展开讲解如何将笛卡尔坐标轴X/Y 轴从图表边缘移动到绘图区中央形成原点十字交叉的经典坐标视图。你将掌握position的三种取值模式边缘字符串、center、按数据值定位的对象形式理解其底层实现原理并获得可直接复制运行的可交互示例。示例概览把轴从边缘移到中心默认情况下Chart.js 的 X 轴位于图表底部bottom、Y 轴位于左侧left。但在散点图scatter等场景中我们往往希望两条轴相交于绘图区正中央让正负数值围绕原点展开。center.md示例正是演示了这一需求使用两个随机生成的散点数据集并把 X、Y 轴的范围都设置为-100 ~ 100为居中轴提供一个对称的坐标空间。示例中的三个交互按钮分别对应position的三种核心用法操作名称position设置效果Default Positionsx: bottom、y: left恢复默认的边缘布局Position: centerx: center、y: center两轴相交于绘图区正中心Position: Vertical: x-60, Horizontal: y30x: {y: 30}、y: {x: -60}按数据值动态定位坐标轴完整示例代码下面是该示例的完整配置与官方示例一致可直接在支持chart-editor的文档环境中运行const actions [ { name: Default Positions, handler(chart) { chart.options.scales.x.position bottom; chart.options.scales.y.position left; chart.update(); } }, { name: Position: center, handler(chart) { chart.options.scales.x.position center; chart.options.scales.y.position center; chart.update(); } }, { name: Position: Vertical: x-60, Horizontal: y30, handler(chart) { chart.options.scales.x.position {y: 30}; chart.options.scales.y.position {x: -60}; chart.update(); } }, ]; const DATA_COUNT 6; const NUMBER_CFG {count: DATA_COUNT, min: -100, max: 100}; const data { datasets: [ { label: Dataset 1, data: Utils.points(NUMBER_CFG), fill: false, borderColor: Utils.CHART_COLORS.red, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5), }, { label: Dataset 2, data: Utils.points(NUMBER_CFG), fill: false, borderColor: Utils.CHART_COLORS.blue, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5), } ] }; const config { type: scatter, data: data, options: { responsive: true, plugins: { title: { display: true, text: Axis Center Positioning } }, scales: { x: { min: -100, max: 100, }, y: { min: -100, max: 100, } } }, };代码要点Utils.points(NUMBER_CFG)来自 docs/scripts/utils.js 的辅助函数基于指定范围内生成{x, y}格式的随机散点数据对应points()内部调用numbers()生成 x 与 y 数组后合并每次运行数值随机因此适合演示轴位置而非具体数据形状交互式actions每个 action 通过handler(chart)直接修改chart.options.scales.x/y.position再调用chart.update()触发布局重算与重绘——这是运行时动态切换轴位置的官方推荐方式也验证了position是运行时可变scriptable配置对称范围min: -100, max: 100保证中心点恰好是坐标原点(0, 0)这是居中轴视觉上原点居中的前提。Axis Position 配置详解position是笛卡尔轴的公共配置项位于命名空间options.scales[scaleId]下。根据 docs/axes/cartesian/_common.md 的说明其类型为string | object没有默认值缺省时按 ID 推断。在 TypeScript 类型定义 src/types/index.d.ts 中它被完整声明为position: left | top | right | bottom | center | { [scale: string]: number };对应 docs/axes/cartesian/index.md 中Axis Position一节的三种定位模式1. 边缘定位默认position: top | left | bottom | right轴被固定在图表绘图区的四条边上。未显式设置时Chart.js 根据轴的 ID 首字母推断方向ID 以x开头的是水平轴默认放底部以y开头的是垂直轴默认放左侧。2. 居中定位centerposition: center轴被放置在图表绘图区的正中心。重要前提在此模式下要么显式指定axis选项x或y要么让轴 ID 以x或y开头。这是因为居中轴不在图表边缘Chart.js 无法从物理位置推断它是水平轴还是垂直轴必须借助axis/ID 来判定方向。在center.md示例中X 轴使用 IDx、Y 轴使用 IDy因此无需额外设置axis。3. 按数据值定位对象形式{ x: -20 }轴的位置与某个轴上的数据值绑定。上例表示当前轴会位于 ID 为x的轴上数值-20所对应的像素位置。限制对于笛卡尔轴一次只能指定一个轴对象中只能有一个键。在示例中chart.options.scales.x.position {y: 30}; // X 轴水平在 Y 轴取值为 30 的位置 chart.options.scales.y.position {x: -60}; // Y 轴垂直在 X 轴取值为 -60 的位置两者组合后两轴不再相交于原点而是错位相交于(-60, 30)附近形成轴随数据平移的视觉效果。底层实现原理从源码看position的三种模式最终都在 src/core/core.scale.js 中分路径处理。核心流程如下1. 方向判定isHorizontal()core.scale.js决定轴的横竖方向isHorizontal() { const {axis, position} this.options; return position top || position bottom || axis x; }注意center和对象形式的 position 都不在此判断范围内——这印证了文档中的要求居中/动态定位时必须能通过axis选项或 ID 前缀确定方向否则isHorizontal()将无法正确返回。而axis本身在Scale.init()core.scale.js中从options.axis读取并挂载到实例上。2. 网格线位置计算_computeGridLineItems()core.scale.js中针对非边缘位置的分支居中x 轴borderValue alignBorderValue((chartArea.top chartArea.bottom) / 2 0.5)即取绘图区上下边界的中点作为水平网格线的锚点居中y 轴borderValue alignBorderValue((chartArea.left chartArea.right) / 2)取左右边界的中点对象形式borderValue alignBorderValue(this.chart.scales[positionAxisID].getPixelForValue(value))即通过getPixelForValue(value)把目标轴上的数据值转换为像素坐标再把当前轴钉在这个像素上。3. 标签位置计算_computeLabelItems()core.scale.js以同样的模式计算刻度标签的锚点x 轴居中y ((chartArea.top chartArea.bottom) / 2) tickAndPadding在中心线下方留出刻度标记与内边距y 轴居中x ((chartArea.left chartArea.right) / 2) - tickAndPadding对象形式同样通过getPixelForValue(value)换算像素坐标。标题位置的计算titleArgscore.scale.js也遵循同一套分支逻辑因此轴标题会跟随轴体一起移动到中心或指定数据值处。4. 测试验证仓库测试用例中已有居中定位的回归测试。例如 test/fixtures/core.scale/x-axis-position-center.json 就是一个散点图 fixtureX 轴使用position: center并显式声明axis: x、min/max: -100/100Y 轴保持position: left测试将渲染结果与同名 PNG 基线比对确保中心轴绘制稳定。同目录下还有 y-axis-position-center.json 覆盖 Y 轴居中场景。这为center模式的渲染结果提供了自动化验证依据。常见问题与注意事项必须明确轴方向使用center或对象形式 position 时如果轴 ID 不是以x/y开头务必显式设置axis: x或axis: y否则轴的方向判定isHorizontal()会失效布局与绘制都会出错。测试 fixture x-axis-position-center.json 中同时设置了position: center与axis: x正是这一要求的体现。对象形式一次只能指定一个轴{x: -20}或{y: 30}均可但不能同时包含x和y两个键——文档明确说明对于笛卡尔轴只允许指定一个轴。交叉轴的可视化配合居中轴效果最好时两个轴都应有对称的min/max如示例中的-100 ~ 100这样两轴恰好相交于原点若范围不对称交点会落在非零数据值处。也可以像示例第三个 action 那样用对象形式把交点故意偏移到目标数值上。与crossAlign的关系刻度标签的crossAlign配置仅在轴位置为top、left、bottom、right且刻度不旋转时生效见 docs/axes/cartesian/index.md 的 Tick Alignment 一节。居中轴不满足该前提因此若需要精细控制居中轴上标签的相对位置应使用ticks.align或调整padding。延伸阅读散点图本示例使用的图表类型docs/charts/scatter.md笛卡尔轴完整文档Axis Position 一节docs/axes/cartesian/index.md所有笛卡尔轴公共配置项含position表docs/axes/cartesian/_common.md刻度标签对齐配置docs/axes/styling.md轴定位核心实现src/core/core.scale.js【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考