本文转自：

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. ningx配置ModSecurity重启出现兼容性问题:ModSecurity： Loaded PCRE do not match with compiled!的解决方法

    nginx开启错误日志,然后重启nginx,出现如下信息: 2016/12/03 09:40:38 [notice] 18858#0: ModSecurity for nginx (STABLE)/2 ...

  2. 关联规则-R语言实现

    关联规则code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && ...

  3. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...

  4. playframework中多附件上传注意事项

    playframework中多附件上传注意事项 2013年09月24日 play 暂无评论 //play版本问题 经确认,1.0.3.2版本下控制器中方法参数  List<File> fi ...

  5. 自制html5塔防游戏

    这是一款由html5里的canvas和普通html元素结合的小游戏,游戏比较简单单一.主要是以建塔,防御为主.下面是游戏的一张截图: 这里是游戏的地址,直接去玩下吧:http://www.lovewe ...

  6. 优化ABAP性能(摘录)

    1.使用where语句不推荐Select * from zflight.Check : zflight-airln = ‘LF’ and zflight-fligh = ‘BW222’.Endsele ...

  7. 2015年第4本（英文第3本）：Godfather教父

    2015年的第4本书,第3本英文书. 书名:Godfather ,中文书名<教父> 作者: Mario Puzo 单词数:17万 词汇量:1万 首万词不重复词数:2200(这个我不太相信) ...

  8. [leetcode] Bitwise AND of Numbers Range

    Bitwise AND of Numbers Range Given a range [m, n] where 0 <= m <= n <= 2147483647, return t ...

  9. HDFS主要特性和体系结构

    引言 Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时,它和其他的分布式文件系统 ...

  10. 【Android开发资料分享】自己整理的Android开发资料，非常全面

    学习Android以来,不知不觉中收集了大量非常优秀的Android开发资料,一直没有系统的整理,最近抽时间把收藏夹中的资料做了一下整理,现在分享给大家,希望能够帮助到需要的人.这份资料我还会不断的更 ...