本文转自：

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. NopCommerce中的单例

    项目中经常会遇到单例的情况.大部分的单例代码都差不多像这样定义: internal class SingletonOne { private static SingletonOne _singleto ...

  2. 使用jQuery库改造ajax

    html页 ---------------------------------------------------------------------------------------------- ...

  3. eclipse优化与标准化记录

    1.文件使用UTF-8格式: 2.取消js验证: 3.设置java文件模板

  4. java微信开发（wechat4j）——设置响应微信参数

    设置响应微信参数 wechat4j框架官方文档: https://github.com/sword-org/wechat4j/wiki

  5. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  6. js中的排序

    不靠谱的sort() 众所周知,js中的sort()排序是按字母表顺序排序的,这就导致如下现象: var a = [9,60,111,55,8,7777]; a.sort(); alert(a); / ...

  7. javascript --- Ajax基础

    神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...

  8. 浅谈Adapter中观察者模式

    首先让我们看一个客户端图片 这是京东客户端的购物车界面.有这么一种功能,当我们在商品列表中调整商品数量等信息的时候,下方的金额总数也随之变化. 可以看出,这个界面有一个数据源,一个适配器,一个List ...

  9. Python基础（5）--字典

    字典由多个键及与其对应的值构成的对组成(把键值对成为项),每个键和它的值之间用冒号(:)隔开,项之间用逗号(,)隔开,而整个字典由一对大括号括起来.空字典由两个大括号组成:{} 本文地址:http:/ ...

  10. 自己使用 1.C语言历史以及特点。

    1. C语言的发展及特点? C在1969--1973年间与Unix操作系统同时诞生:最富创造性的时期是1972年.另一次大的变化发生在1977到1979年间,当Unix系统的可移植性得到证明时.在后一 ...