【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>
五、在线演示
六、源码下载
【HighCharts系列教程】三、图表属性——chart的更多相关文章
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
- CRL快速开发框架系列教程三(更新数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- NGUI系列教程三
接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...
- 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...
- 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...
- Fastify 系列教程三 （验证、序列化和生命周期）
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) 验证 Fast ...
- webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- Android Studio系列教程三--快捷键
Android Studio系列教程三--快捷键 2014 年 12 月 09 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang.com/ ...
随机推荐
- <c:if>替代
由于没有else, 由下面的替代 <c:choose> <c:when test="${usersession.hasPrivilegeByName('Case Delet ...
- mysql 中tinytext、text、mediumtext和longtext详解
一.数字类型 类型 范围 说明 Char(N) [ binary] N=1~255 个字元binary :分辨大小写 固定长度 std_name cahr(32) not null VarChar ...
- [转]c++ new带括号和不带括号
ref:http://m.blog.csdn.net/blog/u012745772/42420443 在new对象的时候有加上(),有不加(),不知道这个到底是什么区别?比如:CBase *base ...
- 12C cdb/pdb 配置监听
. PDB is not an instance, so using SID in the connection string will not work. When the database is ...
- cocos2d-lua SDK接入
1.lua 调用Java函数 1.1 在java中创建一个静态函数(比如在org.cocos2dx.lua.AppActivity.java中)名为Login public static void m ...
- git 强制覆盖本地文件
git fetch --all git reset --hard origin/master git pull
- 解决TortoiseGit 推送 拉取需要密码的问题
找到解决了方法: 1)运行PuTTYGen,在Conversions菜单中点击Import key,选择ssh-keygen生成的私钥文件所在位置,比如id_rsa文件. 2)点击Save priva ...
- 在Android studio中进行NDK开发
在Android studio中进行NDK开发 分类: Android平台 软硬件环境 ubuntu kylin 14.04 红米note增强版 Android studio 0.8.6 ndk ...
- sizeof和strlen
1.char *str="0123456789"; 这个变量是存在静态区域的,是delete不了的,是内存自动分配的,可以用strlen(str)得到其长度,不能用sizeof. ...
- GameUnity 2.0 文档（一） 事件机制
新版本和旧版本一样,有socket事件和内部事件.区别在于,你只要一个监听就可以 消息协议规则: 用类名标记协议的好处是什么? 是利用反射机制来处理每个消息. 程序启动的时候,会读取所有类名,并字典保 ...