【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/ ...
随机推荐
- ios 做的一个三个数求平均数 最大数 最小数
#import "ViewController.h" @interface ViewController ()@property (weak, nonatomic) IBOutle ...
- 微信支付坑：url未注册
微信支付,报:url未注册 页面URL未注册 支付授权目录 这里很重要我就是在这里折腾了很久.怎么设置呢,首先要看你支付的当前页面URL 比如是:http://www.taidupa.com/wxpa ...
- 在 .NET 4 中使用托管可扩展性框架构建可组合的应用程序
https://msdn.microsoft.com/zh-cn/library/ff576068.aspx http://blogs.msdn.com/b/nblumhardt/archive/20 ...
- perl模块安装
转自: http://www.cnblogs.com/itech/archive/2009/08/10/1542832.html http://www.mike.org.cn/blog/index.p ...
- s7-300 第9讲 定时器
- Spring Boot 系列教程2-Data JPA
Spring Data JPA 用来简化创建 JPA 数据访问层和跨存储的持久层功能. 官网文档连接 http://docs.spring.io/spring-data/jpa/docs/curren ...
- asp网站中使用百度ueditor教程
1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...
- download下载excel模板的代码
<%-- 直接在JSP页面中进行文件下载的代码(改 Servlet 或者 JavaBean 的话自己改吧), 支持中文附件名(做了转内码处理). 事实上只要向 out 输出字节就被认为是附件内容 ...
- ant脚本
jenkins在调用ant脚本时会遇到ant中的目标没有成功,但是最后的build状态却是success,如下图所示:代码中缺少一个},编译发生错误,最后的build成功. 解决方案:在关键的targ ...
- Hrbustoj 2266 Legendary Weights（辗转相除求最大公约数）
题意:这个题目的意思是给出一些砝码,问我们能不能根据这些砝码称量出任意重量的物品,最大公约数并不难求,难的在于如何建立这个模型. 思路:根据数论的基础知识,两个数a,b的最大公约数是a*x + b*y ...