【HighCharts系列教程】八、Html标签属性——Labels

一、labels属性说明

Labels属性允许在HighCharts图表的任意位置添加任意的html代码。可以实现许多自定义内容。

二、labels属性详解

参数 子参数 说明 默认值
items —- 一个html标签 —-
—- html html代码 “”
—- style 标签位置(只能是位置,其他css不行) style: {
left: ’100px’,
top: ’100px’
}
style —- 标签的颜色(这里的style和items中的style不同) style: {
color: ‘#3E576F’

三、实例说明

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                  chart: {
                    renderTo: ‘container‘,
                    type: ‘areaspline‘,
                  },
                  credits : {
                        enabled:false//不显示highCharts版权信息
                  },
                  labels:{
                      items:[{
                        //标签代码(html代码)
                        html:‘<p style="font-size:20">Copyright © 2012-2013 </p><a href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我爱物联网</a>‘,
                        style:{ //设置标签位置
                                left:‘100px‘,
                                top:‘50px‘,
                        }
                    }],
                      style:{    //设置标签颜色
                          color:‘rgb(0,0,255)‘
                      }
                  },
                  xAxis: {
                    categories: [‘2011-11‘,‘2011-12‘,‘2012-01‘,‘2012-02‘,‘2012-03‘]
                  },
                  series: [{
                        name: ‘series1‘,
                        data: [2,4,5,9,2]
                    },{
                        name:‘series2‘,
                        data:[3,5,7,2,1]
                    }]
              });
            });
            });
        </script>
    </head>
    <body>
        <script src="js/highcharts.js"></script>
        <script src="js/exporting.js"></script>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

四、效果截图

五、在线演示

演示地址:http://www.52wulian.org/test/HighCharts/highcharts_2_6_labels.html

六、资源下载

本例源文件:http://pan.baidu.com/share/link?shareid=248660&uk=3087605183

时间: 2024-10-03 10:22:35

【HighCharts系列教程】八、Html标签属性——Labels的相关文章

Unity3D脚本中文系列教程(八)

◆ static var matrix : Matrix4x4 描述:设置用于渲染所有gizmos的矩阵. 类方法 ◆ Static function DrawCube(center:Vector3,size:Vector3):void 描述:用center和size绘制一个立方体.function OnDrawGizmosSelected() {        //在变换位置处绘制一个变透明的蓝色立方体        Gizmos.color=Color(1,0,0,5);        Gi

webpack4 系列教程(八): CSS Tree Shaking

教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示): >>> 本节课源码 >>> 所有课程源码 1. CSS 也有 Tree Shaking? 是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码. 为了方便理解 Tree Shaking 概念,并且与 JS

SpringBoot系列教程之事务传递属性

200202-SpringBoot系列教程之事务传递属性 对于mysql而言,关于事务的主要知识点可能几种在隔离级别上:在Spring体系中,使用事务的时候,还有一个知识点事务的传递属性同样重要,本文将主要介绍7中传递属性的使用场景 I. 配置 本文的case,将使用声明式事务,首先我们创建一个SpringBoot项目,版本为2.2.1.RELEASE,使用mysql作为目标数据库,存储引擎选择Innodb,事务隔离级别为RR 1. 项目配置 在项目pom.xml文件中,加上spring-boo

【HighCharts系列教程】三、图表属性——chart

一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置chart属性,你可以轻松改变你的图表的样式.外观. 二.chart属性详解 Chart常用属性如下表 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo

【HighCharts系列教程】一、认识Highcharts

一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的类型有:曲线图.柱状图.饼状图.区域图.散点图.综合图的各种图表需求.最新版2.3.5(截止2013/1/10)增加了各种仪表.时钟等类型图表 说了这么多,总之就是一句话,如果你有图表需求,选择HighCharts吧! 二.如何学习HighCharts 修改HighCharts自带的例子 了解Hig

【HighCharts系列教程】二、Highcharts结构及API文档

一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 2.其次,需要引入HighCharts js文件 <script src="http

Influx Sql系列教程八:query数据查询基本篇

前面几篇介绍了InfluxDB的添加,删除修改数据,接下来进入查询篇,掌握一定的SQL知识对于理解本篇博文有更好的帮助,下面在介绍查询的基础操作的同时,也会给出InfluxSql与SQL之间的一些差别 在开始之前,先看一下供查询的数据 > show measurements name: measurements name ---- yhh > select * from yhh name: yhh time age blog id name phone ---- --- ---- -- ---

【HighCharts系列教程】四、颜色属性——colors

一.Colors属性说明 配置Colors,可以自定义数据列的颜色. 默认下colors就包含一系列颜色,在个性化或需要调整颜色的顺序下,我们可以配置该属性. 二.colors属性详解 Colors属性中包含的是一个十六进制颜色代码数组. 参数 默认值 说明 一组颜色代码,如 colors:['#4572A7','#89A54E',...] colors:[ '#4572A7',   '#AA4643',   '#89A54E',   '#80699B',   '#3D96AE',   '#DB

【HighCharts系列教程】五、版权属性——Credits

一.Credits属性说明 严格来讲,Credits并不算版权信息,官方的说法是:Highchart by default putsa credits label in the lower right corner of the chart. 不管怎样的说法,在自己的图表加上HighCharts字样并有链接,这都图表的美观.专业性都是不好的.通过配置Credits属性,你可以去除或修改HighCharts版权信息. 二.Credits属性详解 参数 说明 默认值 enable 是否显示版权信息