zoukankan      html  css  js  c++  java
  • 【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>

    四、效果截图

    highcharts_2_6_labels

    五、在线演示

    六、资源下载

  • 相关阅读:
    解决Cannot change version of project facet Dynamic web module to 3.0
    mysql 存储过程
    查看建表语句
    mysql query cache 查询缓存
    数据库连接池
    JDBC Statement PrepareStatement
    mysql 改变表结构 alter
    maven 获取pom.xml的依赖---即仓库搜索服务
    windows常用快捷键
    oracle 的数据完整性
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/4253346.html
Copyright © 2011-2022 走看看