最后修改时间:2022-12-15 18:27
Highcharts 图表中的任意文字都可以通过 format
(格式化字符串)或 formatter
(格式化回调函数) 属性来进行修改,format 总是有对应的一个或多个 formatter ,其中 format 字符串简单方便,formatter 回调函数则更加灵活,他们两都是兼容 JSON 格式的。
默认情况下,Highcharts 中的文字及标签使用 SVG 渲染的,所有在默认情况下,Highcharts 只支持少量的和文字相关 HTML 标签:<b>
、<strong>
、<i>
、<em>
、<br/>
、<span>
。这些标签(除 br )支持 style 属性来设置样式,不过支持的样式也仅限和文字相关的样式。
在线试一试
图表中大多数文字还支持 HTML 渲染默认,即设置 userHTML = true
来开启。HTML 模式支持全部的 HTML 标签,你可以轻松的添加图片、表格到图表的标签中,例如在提示框中添加表格、在坐标轴标签添加图片等。HTML 默认有如下限制:
<svg>
标签外的,这就导致了标签是在 SVG 元素的顶层(z-index,即层叠)exporting.allowHTML
可以解决这个问题在线试一试
HTML 渲染模式在低版本浏览器进行双向文字排版中会出现一些问题,详细请查看我们的文档中关于 国际化 相关的内容。
格式化字符串是包含了变量的标签模板。格式化字符串最早是在 Highcharts 2.3 中推出的,并在 Highcharts 3.0 中增强了功能,增加了数值格式化及时间格式化。具体的使用实例是在 xAxis.labels.format、tooltip.pointFormat 及 legend.labelFormat
变量是格式化中用大括号包括的字符,例如 "The point value at {point.x} is {point.y}"
数值格式化字符串是采用了 C 语言浮点型格式化的子集,格式化字符是在大括号内,变量之后,用冒号(:
)分隔的内容。默认情况下点号(.
)表示小数点,空格(
)代表千分符,当然这两个符号可以在 语言文字 选项集里中来设定。下面是一些实例:
同数值格式化,时间格式化也是以冒号为分隔的。时间格式化字符中的符号同 时间格式化函数,下面是实例:
{value:%Y-%m-%d}
,在线试一试对于需要灵活控制、自定义格式化逻辑的需求,我们可以用格式化回调函数来处理,格式化回调函数最终返回 HTML (部分HTML标签)内容。具体的使用可以见 xAxis.labels.formatter、tooltip.formatter 及 legend.labelFormatter 等,另外在格式化函数里你进行会需要用到 时间格式化函数 及 数值格式化函数
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
标题:标签及字符串格式化 | Highcharts 使用教程
链接:https://www.hcharts.cn/docs/basic-labels-string-formatting/
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22