标题（Title）
上一篇
图表组成
下一篇
坐标轴（Axis）
Loading...
Ant Design Charts 中标题（Title） 用于指定图表的标题内容，可以用于一句话展示图表的概要信息。图表的标题是比较常用的组件，分成为主标题和副标题两部分组成，均使用一个文本来展示，可以通过调整文本的样式来定制图表标题的样式。
第一种，传入 boolean 设置是否显示图表标题，图表标题默认为隐藏状态。
({title: false; // 隐藏图表标题})
第二种，传入 titleOption 对图标表进行整体配置。
({title: {title: 'hello', // 主标题的文本新秀丽subtitle: 'world', // 副标题的文本新秀丽},});
标题也可以在 View 层级配置：
({title: {title: 'hello',subtitle: 'world',},});
{"marginTop": 40,"title": {"align": "center","size": 28,"spacing": 4,"title": "我是一个标题 I'am a title","titleFontSize": 28,"titleFontFamily": "sans-serif","titleFontWeight": 600,"titleFill": "#fff","titleFillOpacity": 1,"titleStroke": "#000","titleLineWidth": 2,"titleStrokeOpacity": 1,"subtitle": "我是一个副标题 I'am a subtitle","subtitleFontSize": 16,"subtitleFontFamily": "Arial","subtitleFontWeight": 300,"subtitleFill": "#2989FF","subtitleFillOpacity": 1,"subtitleStroke": "#000","subtitleLineWidth": 1,"subtitleStrokeOpacity": 0.5}}
标题 title 的设置，最简单的设置方式，就是直接指定一个字符串作为标题，这个时候使用默认的样式和位置。当然也可以使用完整的配置项去做一些灵活的自定义。
用于配置图表标题的空间高度大小，默认为 36px，如果配置过小，可能导致标题和图表图形之间重叠。
用于配置图表标题的的左右对齐方式，默认为 left，可以选择使用 left，center，right，分别代表着居左对齐、居中对齐、居右对齐。
用于配置图表主标题和副标题之间的间距，默认为 2px，合适的间距，可以让图表看起来整体更协调。
图表的标题，具体来说是主标题，可以用以下的配置来定制标题的各种样式。
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 图表标题文字内容 | number | (datum, index, data) => number | - |
| titleFontSize | 图表标题字体大小 | number | (datum, index, data) => number | 14 |
| titleFontFamily | 图表标题字体类型 | string | (datum, index, data) => string | sans-serif |
| titleFontWeight | 图表标题字体粗细 | string | (datum, index, data) => string | normal |
| titleTextAlign | 图表标题水平对齐 | string | (datum, index, data) => string | center |
| titleTextBaseline | 图表标题垂直基线 | string | (datum, index, data) => string | middle |
| titleFill | 图表标题填充颜色 | string | (datum, index, data) => string | #000 |
| titleFillOpacity | 图表标题填充透明度 | number | (datum, index, data) => number | 1 |
| titleStroke | 图表标题描边颜色 | string | (datum, index, data) => string | transparent |
| titleStrokeOpacity | 图表标题描边透明度 | number | (datum, index, data) => number | 1 |
| titleLineHeight | 图表标题行高 | number | (datum, index, data) => number | 14 |
| titleLineWidth | 图表标题描边宽度 | number | (datum, index, data) => number | 0 |
| titleLineDash | 图表标题虚线样式 | number[] | (datum, index, data) => number[] | [] |
| titleOpacity | 图表标题整体透明度 | number | (datum, index, data) => number | 1 |
| titleShadowColor | 图表标题阴影颜色 | string | (datum, index, data) => string | transparent |
| titleShadowBlur | 图表标题阴影模糊度 | number | (datum, index, data) => number | 0 |
| titleShadowOffsetX | 图表标题阴影 X 偏移 | number | (datum, index, data) => number | 0 |
| titleShadowOffsetY | 图表标题阴影 Y 偏移 | number | (datum, index, data) => number | 0 |
| titleCursor | 图表标题鼠标样式 | string | (datum, index, data) => string | default |
图表的副标题，可以用以下的配置来定制副标题的各种样式。
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| subtitle | 图表副标题文本 | number | (datum, index, data) => number | 12 |
| subtitleFontSize | 图表副标题字体大小 | number | (datum, index, data) => number | 12 |
| subtitleFontFamily | 图表副标题字体类型 | string | (datum, index, data) => string | sans-serif |
| subtitleFontWeight | 图表副标题字体粗细 | string | (datum, index, data) => string | normal |
| subtitleTextAlign | 图表副标题水平对齐 | string | (datum, index, data) => string | center |
| subtitleTextBaseline | 图表副标题垂直基线 | string | (datum, index, data) => string | middle |
| subtitleFill | 图表副标题填充颜色 | string | (datum, index, data) => string | #666 |
| subtitleFillOpacity | 图表副标题填充透明度 | number | (datum, index, data) => number | 1 |
| subtitleStroke | 图表副标题描边颜色 | string | (datum, index, data) => string | transparent |
| subtitleStrokeOpacity | 图表副标题描边透明度 | number | (datum, index, data) => number | 1 |
| subtitleLineHeight | 图表副标题行高 | number | (datum, index, data) => number | 12 |
| subtitleLineWidth | 图表副标题描边宽度 | number | (datum, index, data) => number | 0 |
| subtitleLineDash | 图表副标题虚线样式 | number[] | (datum, index, data) => number[] | [] |
| subtitleOpacity | 图表副标题整体透明度 | number | (datum, index, data) => number | 1 |
| subtitleShadowColor | 图表副标题阴影颜色 | string | (datum, index, data) => string | transparent |
| subtitleShadowBlur | 图表副标题阴影模糊度 | number | (datum, index, data) => number | 0 |
| subtitleShadowOffsetX | 图表副标题阴影 X 偏移 | number | (datum, index, data) => number | 0 |
| subtitleShadowOffsetY | 图表副标题阴影 Y 偏移 | number | (datum, index, data) => number | 0 |
| subtitleCursor | 图表副标题鼠标样式 | string | (datum, index, data) => string | default |