一、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>

五、在线演示

六、源码下载

【HighCharts系列教程】三、图表属性——chart的更多相关文章

  1. 网页图表Highcharts实践教程之图表区

    网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...

  2. CRL快速开发框架系列教程三(更新数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  4. NGUI系列教程三

    接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...

  5. 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...

  6. 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...

  7. Fastify 系列教程三 （验证、序列化和生命周期）

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) 验证 Fast ...

  8. webpack4 系列教程(三): 多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...

  9. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  10. Android Studio系列教程三--快捷键

    Android Studio系列教程三--快捷键 2014 年 12 月 09 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang.com/ ...

随机推荐

  1. iOS 导航栏去阴影

    if ([[[UIDevicecurrentDevice] systemVersion] floatValue] >= 6.0) { // 首先要判断版本号,否则在iOS 6 以下的版本会闪退 ...

  2. mynotebook

    www.linux.org/threads/beats-audio-on-linux.4443/ askubuntu.com/questions/303775/envy-15-beats-audio- ...

  3. C++11 半同步半异步线程池的实现

    #include <list> #include <mutex> #include <thread> #include <condition_variable ...

  4. .net ToString()用法详解与格式说明

    我们经常会遇到对时间进行转换,达到不同的显示效果,默认格式为:2006-6-6 14:33:34 如果要换成成200606,06-2006,2006-6-6或更多的格式该怎么办呢? 这里将要用到:Da ...

  5. Oracle自增长序列

    create table user_info ( id number(6) primary key, username varchar2(30) not null, password varchar2 ...

  6. String s = new String("aa") 创建了几个对象？

    1 最近几个同学面试的时候出现了这样一个问题 刚听到这个题目的时候的确是不知所措: 经过网上的查找和自己的理解来解释一下这个题目的答案 答案是: 为什么呢??? 1 实现我们都知道创建实例有两种方法 ...

  7. linux的学习系列 1---简介

    Linux简介 严格的来讲,Linux 不算是一个操作系统,只是一个 Linux 系统中的内核,即计算机软件与硬件通讯之间的平台:Linux的全称是GNU/Linux,这才算是一个真正意义上的Linu ...

  8. HDU2066一个人的旅行／最短路问题

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  9. VHD进阶：差分VHD备份系统

    VHD进阶:差分VHD备份系统 一.创建虚拟磁盘 方法1:图形界面创建 1.打开磁盘管理器(运行diskmgmt.msc),在“磁盘管理”上点击右键,“创建VHD”,类型选择VHD,动态扩展或者固定大 ...

  10. 购物车CheckBox全选、反选

    注意:不是很完美 //--------------------主布局文件--------------------------------- <LinearLayout xmlns:android ...