【HighCharts系列教程】三、图表属性——chart

一、chart属性说明

Chart是HighCharts图表中主要属性，包括了图表区域的颜色、线条、高度、宽度、对齐、图表类型等诸多属性，也是HighCharts图表中必须配置的属性之一。

配置chart属性，你可以轻松改变你的图表的样式、外观。

二、chart属性详解

Chart常用属性如下表

参数	描述	默认值
backgroundColor	设置图表区背景色	#FFFFFF
borderWidth	设置图表边框宽度	0
borderRadius	设置图表边框圆角角度	5
renderTo	图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值	null
defaultSeriesType	默认图表类型line, spline, area, areaspline, column, bar, pie , scatter	0
width	图表宽度，默认根据图表容器自适应宽度	null
height	图表高度，默认根据图表容器自适应高度	null
margin	设置图表与其他元素之间的间距，数组，如[0,0,0,0]	[null]
plotBackgroundColor	主图表区背景色，即X轴与Y轴围成的区域的背景色	null
plotBorderColor	主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色	null
plotBorderWidth	主图表区边框的宽度	0
shadow	是否设置阴影，需要设置背景色backgroundColor	false
reflow	是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小	true
zoomType	拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：‘x’,'y’,'xy’	”
events	事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数

chart属性下还有更多不常用的配置，可以参考API文档进行详细设置。

三、效果截图

四、实例说明

<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: 'container',//div 标签
                    type: 'line',//图表类型

                    /******************以下chart配置可选******************/
                    backgroundColor:"#EAF7FF",//图表背景色
                    borderWidth:5,//图表边框宽度
                    borderRadius:15,//图表边框圆角角度
                    plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
                    plotBorderColor:'red',//主图表边框颜色
                    plotBorderWidth:2,//主图表边框宽度
                    shadow:true,//是否设置阴影
                    zoomType:'xy'//拖动鼠标放大图表的方向
                  },
                  credits : {
                    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="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

五、在线演示

演示地址：http://www.52wulian.org/test/HighCharts/highcharts_2_1_chart.html

六、源码下载

下载地址：http://pan.baidu.com/share/link?shareid=206384&uk=3087605183