彩票走势图

Highcharts基础教程(九):HTML标签(labels)

转帖|使用教程|编辑:龚雪|2016-07-18 16:15:56.000|阅读 1204 次

概述:HTMl标签(Lables)指的是可以放置在图表中任意位置的文字标签,由于最终的文字标签是以 SVG 渲染的,所以标签的内容只支持少量的 HTML 标签。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

可以通过 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 给图表添加文字标签

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 的类 

Via:hcharts.cn

点击下载最新版 Highcharts

如果你想提供任何产品反馈,。

购买最新版Highcharts<>,即可拥有最新正版授权!


标签:图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP