一、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. easyui 动态渲染

    $.parser.parse   这个 $("div[data-easyuisrc]").html(function () { var url = $(this).attr(&qu ...

  2. [实用]DNS解析命令，静静地学会【转载】

    [实用]DNS解析命令,静静地学会 2016-08-04 06:50 一.Windows下的nslookup 简单的查某个域名,那就nslookup toutiao.com,上面是dns地址,下面是解 ...

  3. MySQL启动相关知识

    使用mysqld和mysqld_safe启动的区别 直接运行mysqld程序来启动MySQL服务的方法很少见,mysqld_safe脚本[注意:mysqld_safe只是一个脚本]会在启动MySQL服 ...

  4. Git 版本管理基本操作

    Git是一个版本管理操作的工具 非常N,可以很智能的分布式管理, 本网站学习笔记 来自于廖雪峰老师的内容借鉴 安装 yum -y install git 本地设置全局 告知是谁提交代码 信息 # gi ...

  5. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  6. Mybatis 一对一，一对多，多对一，多对多的理解

    First (一对一) 首先我来说下一对一的理解,就是一个班主任只属于一个班级,一个班级也只能有一个班主任.好吧这就是对于一对一的理解 怎么来实现呢? 这里我介绍了两种方式: 一种是:使用嵌套结果映射 ...

  7. JavaBean技术的一些讲解

    JavaBean: 由于原先的jsp的html代码和css代码以及java代码都是写在一起的,所以看起来就比较冗余,同时 也体现不了javaBean中面向对象的思想的{当然可以同过jstl标签库以及m ...

  8. 1.1 mysql安装

    直接百度mysql 即可下载.. 下载完毕之后是压缩包,解压缩即可 解压之后可以将该文件夹改名,放到合适的位置,个人建议把文件夹改名为MySQL Server 5.6,放到D:\MySQL Serve ...

  9. wchar_t * 与 char * 互相转换小记

    wchar_t * 与char *之间的转化只需要借助标准库里面的std::wcstombs和std::mbstowcs就能实现了

  10. C++字符串（1）

    C++ 拼接字符串常量 C++允许拼接字符串字面值,即将两个用引号括起的字符串合并为一个.事实上,任何两个由空白(空格,制表符和换行符)分隔的字符串常量都将自动拼接成一个. 例子: cout < ...