zoukankan      html  css  js  c++  java
  • 【HighCharts系列教程】五、版权属性——Credits

    一、Credits属性说明

        严格来讲,Credits并不算版权信息,官方的说法是:Highchart by default puts
    a credits label in the lower right corner of the chart。

        不管怎样的说法,在自己的图表加上HighCharts字样并有链接,这都图表的美观、专业性都是不好的。通过配置Credits属性,你可以去除或修改HighCharts版权信息。

    二、Credits属性详解

    参数说明默认值
    enable 是否显示版权信息 true,也就是默认会显示
    href 链接地址 http://www.highcharts.com
    position 版权文字的位置 position: {
    align: ‘right’, x: -10,
    verticalAlign: ‘bottom’, y: -5
    }
    style 版权文字的样式 itemStyle: {
    cursor: ‘pointer’,color: ‘#909090′,fontSize: ’10px’
    }
    text 版权文字 Highcharts.com

    三、实例说明

    <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({
                        //HighCharts中chart属性配置
                      chart: {
                        renderTo: 'highcharts_2_3',//div 标签
                        type: 'column',//图表类型
                      },
                     
                      credits : {
                            //enable:true,默认就为true,可以不配置
                            //如果想要去除版权(也就是不显示),只需要设置enable:false即可
                            href:'http://www.52wulian.org',//链接地址
                            position: {                        //文字的位置
                                x:-30,
                                y:-30
                            },
                            style:{                            //文字的样式
                                color:'red',
                                fontWeight:'bold'
                            },
                            text:'我爱物联网'                //文字
                      },
                      xAxis: {
                        categories: ['1','2','3','4','5']
                      },      
                      series: [{
                            name: 'series1',
                           data: [2,4,5,9,2]
                       }]
                    });
                });
                });
            </script>
        </head>
        <body>
            <script src="js/highcharts.js"></script>
            <script src="js/exporting.js"></script>
            <div id="highcharts_2_3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
        </body>
    </html>

    四、效果截图

    highcharts_2_3_credits

    五、在线演示

    六、源码下载

  • 相关阅读:
    【转】html的meta总结
    style.left 与offsetLeft之间的区别
    VM886
    js 获取数据类型
    JS序列化URL方法
    userData 本地存储
    第一章 1.6 HTML5 的新功能(二)
    第一章 1.6 HTML5 的新功能(一)
    第一章 1.5 无插件范式
    第一章 1.4 新的认识
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/4253329.html
Copyright © 2011-2022 走看看