本文转自：

http://jsfiddle.net/vCZ8V/1/

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图表自适应浏览器窗体的大小或者页面大小的更多相关文章

  1. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

  2. [笔记]学习HighCharts的使用（不错的web图表插件）

    最近有一个小项目需要用到折线图.到处请教了一下,有人给我推荐了highcharts.感觉还不错,就稍微学习下.这里记录一下学习的过程. 网上相关的内容还不少,我就说一下我学习的内容. 看的第一篇文章& ...

  3. Highcharts 时间序列，可缩放的图表；Highcharts X 轴翻转曲线图；Highcharts 带标记曲线图

    Highcharts 时间序列,可缩放的图表 配置 图表 配置可缩放图表. chart.zoomType 指定了用户可以拖放的尺寸,用户可以通过拖动鼠标来放大,可能值是x,y或xy: var char ...

  4. Highcharts报表——让你的网页上图表画的飞起

    Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...

  5. Highcharts Highstock 学习笔记 第一篇 Highcharts配置

    Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...

  6. R图表入门

    R图表入门 R语言最强的功能就是统计和作图了,在学习了基本语法之后,博主马上体验了一下R的图表功能 条形图 例1 H = c(7,12,28,3,41) M = c("Mar",& ...

  7. Echart图表入门

    1.Echart是什么? Enterprise Charts的缩写,商业级数据图表,一个纯Javascript的图表库.更多的内容可以参考网上的资料 2.使用步骤 a.下载开发包 官网地址:http: ...

  8. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  9. Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize

    当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart. ...

随机推荐

  1. 【JS复习笔记】07 复习感想

    好吧,其实<JavaScript语言精粹>后面还简单介绍了代码风格,优美特性,以及包含的毒瘤.糟粕. 但我很快就看完了,发现其实都在前面讲过了,所以就不写了. 至今为止已经算是把JavaS ...

  2. 精进不休 .NET 4.5 (12) - ADO.NET Entity Framework 6.0 新特性, WCF Data Services 5.6 新特性

    [索引页][源码下载] 精进不休 .NET 4.5 (12) - ADO.NET Entity Framework 6.0 新特性, WCF Data Services 5.6 新特性 作者:weba ...

  3. 比较偏门的JVM语言Quercus - PHP on JVM

    其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...

  4. Protocol Buffers动态消息解析

    http://www.searchtb.com/2012/09/protocol-buffers.html http://www.cnblogs.com/jacksu-tencent/p/344731 ...

  5. 在Eclipse中配置Tomcat时，出现Cannot create a server using the selected type错误

    在eclipse中配置Tomcat时,出现Cannot create a server using the selected type错误 原因:Tomcat被删除或者是重新安装,并且安装目录改变了. ...

  6. mongodb学习6--js操作mongodb

    一,mongo知识储备:1. 获取mongoDB中数据库的大小命令use databasenamedb.stats()显示信息如下 > db.stats() { "collection ...

  7. css复习笔记

    margin: 1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下. 2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准.另外,当一个元素包裹另一元素时也会发生折叠. ...

  8. 使用svcutil.exe 工具来生成调用文件

    svcutil.exe http://localhost:9065/ServiceDemo.svc?wsdl 这将生成一个配置文件和一个包含客户端类的代码文件. 下面我们就用这个是怎么生成的: 1,打 ...

  9. 【读书笔记】iOS-截屏功能的实现。

    一,整个工程文件. 二,代码 ViewController.m #import "ViewController.h" #import <QuartzCore/QuartzCo ...

  10. Spring(三)Bean继续入门

    一.Aware相关接口 对于应用程序来说,应该尽量减少对Sping Api的耦合程度,然而有些时候为了运用Spring所提供的一些功能,有必要让Bean了解Spring容器对其进行管理的细节信息,如让 ...