[转]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. ...
随机推荐
- 011_URL和Ajax辅助器方法
创建基本的链接和URL 在我们介绍链接或URL之前先做一些准备,我们这部分要介绍的知识将要使用的项目就是之前建立的HelperMethods项目,现在需要先为其添加一个People控制器,并在其中定义 ...
- 根据Expander的IsExpanded属性值的变化动态设计Control的size
简要说明: 当Expander 的IsExpanded属性为“True” 时给控件设个尺寸(此处为高度),当为“False”时给控件设另外一个值. 知识点:数据绑定.Style和Trigger < ...
- 【Bootstrap基础学习】02 Bootstrap的布局组件应用示例
字体图标的应用示例 <button type="button" class="btn btn-default"> <span class=&q ...
- 重新想象 Windows 8.1 Store Apps (93) - 控件增强: GridView, ListView
[源码下载] 重新想象 Windows 8.1 Store Apps (93) - 控件增强: GridView, ListView 作者:webabcd 介绍重新想象 Windows 8.1 Sto ...
- ASP.NET AJAX Control Toolkit
https://ajaxcontroltoolkit.codeplex.com/ 警告 7 未能找到引用的组件“Antlr3.Runtime”. 警告 6 未能找到引用的组件“HtmlAgilityP ...
- 平衡二叉树---Shaolin
Description Shaolin temple is very famous for its Kongfu monks.A lot of young men go to Shaolin temp ...
- Hibernate的初步
1.简介 在java开发领域,基于数据库应用的设计与实现一直都是面向关系的,Hibernate对象/关系映射ORM框架的出现为java面向对象开发提供了易于使用的数据持久化解决方案. ORM介绍: ( ...
- FlexPaper 2.2.1介绍与提取嵌入的文档
源起看到某个公司内网的公文使用FlexPaper组件来显示文档,在这儿是GoogleCode Project的主页, 还有现在的官方主页.目前FlexPaper是个开源项目,GPLv3 ...
- saltstack学习笔记1 --安装
salt官网:http://docs.saltstack.cn/zh_CN/latest/ 安装教程: - http://docs.saltstack.cn/zh_CN/latest/topics/i ...
- GitHub上我收藏Java及Android的项目Demo
接触编程不久但浏览频率最高的还是GitHub毕竟它真的是程序员必不可少的新世界. (2016/9/23更新) 静态更新,很强势你值得拥有 更新资源不需要重新安装APK (2016.9.10更新) ht ...