1,设置Highcharts的动态宽高。

  获取Highcharts图表需要的宽高值,给到Highcharts图表的div容器。

  如:var hpvCountSendDateHei = $(".hpvCountSendDate_Box").height()+110;  //110 矫正值

    var hpvCountSendDateWidth = $(".hpvCountSendDate_Box").width();
    $(".attrVlaueThree").height(hpvCountSendDateHei-110);

2,宽度为400,Highcharts绘制出来的图为600,溢出div容器外

解决方案:给Highcharts一个width值。

var hpvCountSendDateWidthChart = $(".hpvCountSendDate_Box").width();//获取right侧width(和柱图一样的元素width)
$("#"+batchIdS_N).highcharts({
chart: {
type: 'bar',
width:hpvCountSendDateWidthChart // 设置Highcharts的width
},
title: {
text: ''
},
subtitle: {
useHTML: true,
text: ''
},
colors:['#B6C6FA','#92F9E4'], // 柱图颜色
credits: {
enabled: false //不显示LOGO
}, xAxis: [{
categories: [1,2,3,4,512,43,65,89],
reversed: false,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: "(实验室个数)",
align:"high",
},
allowDecimals:false,
labels: {
formatter: function () {
return (Math.abs(this.value) / 1) ;
}
},
min: -100,
max: 100
},
legend: {
align: 'center',
verticalAlign: 'top',
y: 0,
x:25,
floating: false,
borderWidth: 0
},
plotOptions: {
series: {
stacking: 'normal'
},
column:{
pointWidth:10
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', 型别名称 ' + this.point.category + '</b><br/>' +
'实验室个数: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: '阳性',
data: [90,422,43,45,675,45]
}, {
name: '阴性',
data: [23,434,656,23,648,89]
}] })

正常了:

Highcharts 宽度溢出容器的更多相关文章

  1. js判断文本是否溢出容器

    onShowNameTipsMouseenter: function(e) { var target = e.target; var containerLength = $(target).width ...

  2. Bootstrap3基础 container 浏览器宽度与容器宽度的四种配合

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. css布局------左右宽度固定,中间宽度自适应容器

    HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...

  4. IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  5. RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  6. LODOP整页缩放,宽度、高度溢出缩放

    LODOP中,超文本超过打印项高度会自动分页,可以用语句进行缩放,让打印内容都在一页中.例如,整页缩放和高度溢出缩放.如下是三个语句及其效果,注意对内容缩放可能会导致变形哦,毕竟是不等比例缩放:LOD ...

  7. Highcharts指南

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  8. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  9. Highcharts下载与使用_数据报表图

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

随机推荐

  1. log4j.properties的配置信息

    吃了没日志的亏,以前总以为日志没用,以后要重视起来了,很多错误服务器不会显示,但是页面上就是出错,这个时候就要显示日志了. 日志的代码如下,创建日志文件,文件名为log4j.properties,把这 ...

  2. react语法注意事项

    组件: var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.n ...

  3. 68-Flutter中极光推送的使用

    1.申请极光账号和建立应用 极光推送的官方网址为:https://www.jiguang.cn/ 注册好后,进入'服务中心',然后再进入'开发者平台',点击创建应用. 这时候会出现新页面,让你填写“应 ...

  4. 014_matlab读取ecxel(直接导入)

    视频教程:https://v.qq.com/x/page/c3039b5htwx.html 资料下载:https://download.csdn.net/download/xiaoguoge11/12 ...

  5. 爬虫 -- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xe6 in position 301: unexpected end of data

     errors参数有3个值:strict,  ignore,  replace html.decode("utf-8"),这种形式有时会报错,那么修改为下面形式,将decode函数 ...

  6. 洛谷 P1462 通往奥格瑞玛的道路 题解

    P1462 通往奥格瑞玛的道路 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡 ...

  7. jmeter通过cookie获取图片验证码实现登录2

    在登录时有一张图片验证码,需要获取验证码用于后续登录,见图 1.找到图片验证码接口写入jmeter 2.正则表达式提取cookie 3.Fiddler抓取登录成功的响应cookie,并设置成全局 4. ...

  8. Oracle 的查询组合语句

    select   a.core_txn_srl_no||a.c_dept||a.c_batch||lpad(a.c_opr_no,5,'0')||case a.txn_dr_cr_ind when ' ...

  9. abp 中log4net 集成Kafka

    1.安装包 Install-Package log4net.Kafka.Core 2.修改log4net.config 配置文件 <?xml version="1.0" en ...

  10. 投稿SCI杂志 | 如何撰写cover letter | 如何绘制illustrated abstract

    现在大部分学术期刊杂志都要求提供这两样东西. 一个是面向editor的文章和研究的高度总结:一个是面向读者的高度总结,一图胜千言. 如何制作动画摘要呢? 收集素材,大部分内容在PPT里就能完成. 如何 ...