Highcharts使用教程（6）：边框制作-控件新闻-慧都网

Highcharts使用教程（6）：边框制作

原创|使用教程|编辑：龚雪|2014-06-03 09:52:40.000|阅读 4265 次

概述：想为Highcharts图表加上一个美观实用的边框吗，今天我们就为大家讲解Highcharts的边框制作方法。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

一、边框颜色

在Highcharts中borderColor表示边框颜色，外图表区域的边框颜色。边框是使用矢量图技术绘制来支持圆角。默认颜色 "#4572A7"。

效果图：

Highcharts的边框设计

代码：

$(function () {
    $('#container').highcharts({
        chart: {
            borderColor: '#EBBA95',
            borderWidth: 2,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {   
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

二、边框圆角

borderRadius表示边框圆角，外图表区域边框圆角。默认为5。

效果图

Highcharts的边框设计

代码：

$(function () {
    $('#container').highcharts({
        chart: {
            borderColor: '#EBBA95',
            borderRadius: 20,
            borderWidth: 2,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {   
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

三、边框宽度

borderWidth表示边框宽度，外图表边框宽度。边框是使用矢量图技术绘制来支持圆角。默认宽度为0。

效果如：

Highcharts的边框设计

代码：

$(function () {
    $('#container').highcharts({
        chart: {
            borderColor: '#EBBA95',
            borderWidth: 3,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {   
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

标签：JavaScript 图表

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：慧都控件网

上一篇：JS地图工具FusionMaps如何设置渐变色下一篇：LEADTOOLS代码示例大全（一）