【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/ ...
随机推荐
- 好用的API文档--在线版
安卓在线api http://www.android-doc.com/reference/packages.html
- 暴力+树状数组维护 Codeforces Round #378 (Div. 2) C
题目大意:给你一个长度为n的数组a,然后数值大的可以合并数值小的,且合并了以后该数组的长度-1.给你一个长度为k目标数组b,问,是否可以从a数组变到b数组,是就yes并且输出步骤.否就输出no 思路: ...
- MySQL整理碎片
1 innodb引擎表 alter table TABLE_NAME engine='innodb'; 还有一种方法 optiize table TABLE_NAME; http://stackove ...
- MSG 结构
MSG 消息结构 在 Windows 程序中,消息是由 MSG 结构体来表示的. 结构原型: typedef struct tagMSG { HWND hwnd; UINT message; ...
- oracle恢复一个数据表的方法
今天提交给客户方一个sql脚本去跟新历史数据,结果客户那边的部署人员犯了一个错误,直接拿系统账号去部署,结果第一段代码没有执行成功,结果第二段代码却执行成功了,并且已经提交了的,....由于事前没有备 ...
- 天天果园，中粮我买网等生鲜APP竞品分析
奈何对生鲜行业的品类,价格,供应链不熟悉,想先从APP开始来了解生鲜行业和各个生鲜企业,若有不足之处,还望海量,也请帮忙指正. 选取了以下竞品:天天果园,易果生鲜,一米鲜,中粮我买网,爱鲜蜂,每日优鲜 ...
- 设计模式-中介者模式（Mediator）
/***中介者模式在消息队列中的应用*/package test.mediator; public abstract class Message { private Messages messages ...
- xp安装maven
1.下载apache-maven-2.0.8 2.设置xp环境变量 MAVEN_HOME D:\apache-maven-2.0.8 在path里面假如 %MAVEN_HOME%\bin 然后打开c ...
- map.entry<k,v>小用法（转）
你是否已经对每次从Map中取得关键字然后再取得相应的值感觉厌倦?使用Map.Entry类,你可以得到在同一时间得到所有的信息.标准的Map访问方法如下: Set keys = map.keySet( ...
- sqlserver2008用bat脚本备份时报错因为库名有中横杠【原创】
提示原因是数据库名字有中横岗“-” 解决方法:用中括号把名字括起来就可以了 call :backupone [数据库名-new] 完整备份脚本如下 @ECHO ON set DATE=%date:/= ...