HightChart的HTML标签(labels)
来源:互联网 发布:淘宝买家敲诈食品卖家 编辑:程序博客网 时间:2024/06/06 00:59
HTMl标签(Lables)指的是可以放置在图表中任意位置的文字标签,由于最终的文字标签是以 SVG 渲染的,所以标签的内容只支持少量的 HTML 标签,包括:<b>
、<strong>
、<i>
、<em>
、<br/>
、<span>
,其中 可以通过 style 属性来设定样式,但是有效的样式仅限和文字相关的属性。HTML 标签的基本构造是:
labels: { style: { // 标签全局样式 color: "#ff0000", fontSize: '12px', fontWeight: 'normal', fontFamily: '' }, items: [{ // items 数组,可以设置多个标签 html: 'html 标签内容', style: { // 标签样式,会继承和重写上层全局样式 left: '50px', top: '100px', color: 'red', fontSize: '12px', fontWeight: 'normal', fontFamily: '' } }]},
在线试一试
扩展内容
通过学习上面的内容我们知道,HTMl标签只能添加简单的文字标签,并且只能是在图标初始化的时候才能添加,那么对于添加文字标签,highcharts 有没有更方便的编程接口呢?
答案是有的,对应的 API 是 Renderer
。
Renderer 是一个提供了原始绘图接口的对象,可以直接在图表上绘制基础的图形,包括圆形、矩形、线条、文字等,在主流浏览器中,对应的是 SVG 封装,IE8 以下则是 VML 封装。
Renderer 可以通过 chart.renderer (chart 为已经存在的图表对象)或 Highcharts.Renderer() 方式调用,对应的初始化方式有所不同:
chart.renderer
Highcharts.Renderer(parentNode, width, height);
其中 parentNode 表示图形希望被添加到的 html元素(dom)。
Renderer 支持链式编程,即可以在同一个表达式中多次调用相关的函数,例如:
chart.render.rect( // ... 省略代码 ).attr( // ... 省略代码 ).css( // ... 省略代码 );
更多关于 Renderer 的信息请参看 API 文档:Renderer。
通过 Renderer 给图表添加文字标签
1、Renderer.text()
构造方法:Renderer.text(String str, Number x, Number y)
参数列表:
String str: 需要添加的文字Number x: 水平偏移Number y: 竖直偏移
在线试一试
2、Renderer.label()
Renderer.label() 支持更多高级属性,例如边框,背景等。
构造方法:
Renderer.label (String str, Number x, Number y, String shape, Number anchorX, Number anchorY, Boolean useHTML, Boolean baseline, String className)
参数列表:
String str: 标签内容Number x: 水平偏移Number y: 竖直偏移String shape: 形状Number anchorX: 如果形状中包含指示,例如 chevron 和 callout。anchorX 指定指示形状的 x 位置Number anchorY: 如果形状中包含指示,例如 chevron 和 callout。anchorY 指定指示形状的 y 位置Boolean useHTML: 是否开启 HTML 模式来渲染标签Boolean baseline:是否让标签以文字的 baseline 来竖直对齐String className:标签的父级元素 g 的类
在线试一试
- HightChart的HTML标签(labels)
- 十三、基础教程-HTML标签(labels)
- Confluence 流行的标签(Popular Labels)宏
- Confluence 最近使用的标签(Recently Used Labels)宏
- Confluence 相关的标签(Related Labels )宏
- HightChart的坐标轴(Axis)
- labels--绑定的标签元素的集合
- Confluence 标签列表(Labels List)宏
- ImageNet 2012 中文标签(Chinese Labels)
- ImageNet 2012 中文标签(Chinese Labels)
- ImageNet 2012 中文标签(Chinese Labels)
- HightChart的数据列(Series)
- HightChart的helloWorld程序
- hightChart 的一些实现
- hightChart去除水印的方法
- HightChart设置标题(Title)
- HightChart版权信息(credits)
- HightChart标示线(plotLines)
- 11636 - Hello World!(水题)
- iOS学习笔记10-设计模式-单例模式(懒汉式,饿汉式)
- 在惠普的三个星期
- Favor the Simple Over the Complex
- JavaEE学习曲线
- HightChart的HTML标签(labels)
- nao机器人远程及本地模块编写
- hdu 5442 长春区域赛网络赛 1006 Favorite Donut(后缀数组)
- 跑第一个hadoop自带示例遇到的错误
- 利用JDBC完成数据库的CRUD
- (4.3.1.16)java.lang.NoSuchMethodException: setHomeActionContentDescription
- 写给自己——卡方检测
- 5、支持向量机SVM
- http://write.blog.csdn.net/postedit