【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

五、在线演示

六、源码下载

原文地址:https://www.cnblogs.com/henuyuxiang/p/4253329.html