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

最新推荐文章于 2021-06-22 10:28:33 发布

转载最新推荐文章于 2021-06-22 10:28:33 发布 · 434 阅读

文章标签：

#嵌入式 #javascript #ViewUI

本文详细解析了Highcharts图表中labels属性的使用，包括其参数子参数说明、实例说明等内容，帮助开发者实现自定义内容添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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>