[转]highcharts图表入门之:如何让highcharts图表自适应浏览器窗体的大小或者页面大小
本文转自:
http://www.stepday.com/topic/?740
http://blog.csdn.net/yueritian/article/details/30777351
<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script> </head>
<body>
<div id="container" style="height: 50%">
<script language="JavaScript">
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
}); $(document).ready(function() { var chart = new Highcharts.Chart({ chart: {
renderTo: container,
spacingTop: 3,
spacingRight: 0,
spacingBottom: 3,
spacingLeft: 0
}, credits: {
enabled: false
}, xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}, series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}] }); });
</script>
</body>
</html>
[转]highcharts图表入门之:如何让highcharts图表自适应浏览器窗体的大小或者页面大小的更多相关文章
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- [笔记]学习HighCharts的使用(不错的web图表插件)
最近有一个小项目需要用到折线图.到处请教了一下,有人给我推荐了highcharts.感觉还不错,就稍微学习下.这里记录一下学习的过程. 网上相关的内容还不少,我就说一下我学习的内容. 看的第一篇文章& ...
- Highcharts 时间序列,可缩放的图表;Highcharts X 轴翻转曲线图;Highcharts 带标记曲线图
Highcharts 时间序列,可缩放的图表 配置 图表 配置可缩放图表. chart.zoomType 指定了用户可以拖放的尺寸,用户可以通过拖动鼠标来放大,可能值是x,y或xy: var char ...
- Highcharts报表——让你的网页上图表画的飞起
Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...
- Highcharts Highstock 学习笔记 第一篇 Highcharts配置
Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...
- R图表入门
R图表入门 R语言最强的功能就是统计和作图了,在学习了基本语法之后,博主马上体验了一下R的图表功能 条形图 例1 H = c(7,12,28,3,41) M = c("Mar",& ...
- Echart图表入门
1.Echart是什么? Enterprise Charts的缩写,商业级数据图表,一个纯Javascript的图表库.更多的内容可以参考网上的资料 2.使用步骤 a.下载开发包 官网地址:http: ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize
当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart. ...
随机推荐
- 保存登录信息的Cookie加密技术
所有需要账户登录的website 基本都会想到这样一个问题, 如何保持用户在一定时间内登录有效. 最近本人就在项目中遇到这样的需求,某些页面只能Admin账户登录后访问, 当登录Admin账户后如何才 ...
- Hibernate框架之注解的配置
在hibernate中,通常配置对象关系映射关系有两种,一种是基于xml的方式,另一种是基于annotation的注解方式,熟话说,萝卜青菜,可有所爱,每个人都有自己喜欢的配置方式,我在试了这两种方式 ...
- rabbitmq队列中消息过期配置
最近公司某个行情推送的rabbitmq服务器由于客户端异常导致rabbitmq队列中消息快速堆积,还曾导致过内存积压导致rabbitmq客户端被block的情况.考虑到行情信息从业务上来说可以丢失部分 ...
- Play Framework介绍:控制器层
业务逻辑代码通常位于模型(model)层.客户端(比如浏览器)无法直接调用其中的代码,所以模型对象提供的功能,必须作为资源以URI方式暴露给外部. 客户端使用HTTP协议来操作这些资源,从而调用了内部 ...
- 挖掘机技术哪家强(c++实现)
描述:为了用事实说明挖掘机技术到底哪家强,组织一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入:输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位参赛者的 ...
- offset笔记
1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidth 5.offsetHeight offsetWidth是元素的可视宽度,这个宽度包括元素的边框 ...
- 同源策略和JSONP(概念性)
同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy). 所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明 ...
- 通过SMATFORMS打印程序的参考模板
REPORT ydemo_rick_print. CONSTANTS: c_lable_smartforms TYPE tdsfname VALUE 'ZCUSTOMER'. "标签sma ...
- Android拍照保存在系统相册不显示的问题
Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE); Uri uri = Uri.fromFile(new File(& ...
- 简明 Vim 练级攻略(转)
原文:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会 ...