Highcharts 宽度溢出容器
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 宽度溢出容器的更多相关文章
- js判断文本是否溢出容器
onShowNameTipsMouseenter: function(e) { var target = e.target; var containerLength = $(target).width ...
- Bootstrap3基础 container 浏览器宽度与容器宽度的四种配合
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- css布局------左右宽度固定,中间宽度自适应容器
HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...
- IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...
- RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...
- LODOP整页缩放,宽度、高度溢出缩放
LODOP中,超文本超过打印项高度会自动分页,可以用语句进行缩放,让打印内容都在一页中.例如,整页缩放和高度溢出缩放.如下是三个语句及其效果,注意对内容缩放可能会导致变形哦,毕竟是不等比例缩放:LOD ...
- Highcharts指南
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- 转:Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- Highcharts下载与使用_数据报表图
Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...
随机推荐
- frp开机启动
暂时只介绍linux版本的做法,作为备忘. 添加systemd配置文件: vim /usr/lib/systemd/system/frp.service 文件内容如下: [Unit] Descript ...
- Dubbo架构及原理
1.Dubbo:Dubbo是一个分布式服务框架,SOA治理方案. 主要功能有:高性能的NIO通讯以及协议集成.服务动态寻址与路由.软负载均衡与容错.依赖分析与降级 主要特点: 连通性:provider ...
- [HTTP趣谈]origin,referer和host区别
发起一个ajax请求时,request header里面有三个属性会涉及请求源信息.前端可能用不到这些值,但是,后台业务系统会比较关心它们,场景可能有: 处理跨域请求时,必须判断来源请求方是否合法: ...
- Common Substrings POJ - 3415 (后缀自动机)
Common Substrings \[ Time Limit: 5000 ms\quad Memory Limit: 65536 kB \] 题意 给出两个字符串,要求两个字符串公共子串长度不小于 ...
- cloudevents 通用event 描述指南
cloudevents 是由cncf 组织管理的一个通用event描述指南 特性: 一致性 可理解性 可移植性 说明 cloudevents 不仅提供了核心描述,同时也包含了不同协议的指南说明(htt ...
- 将zabbix服务和monitor服务在一个机器上部署
问题,两个服务的文件路径都是 /usr/local/sdata下,要让两个服务共存,至少需要讲一个服务的文件迁移到别的文件夹,同时将所有的配置项都进行修改,使能找到指定的文件路径, 方案1,先按照za ...
- eclipse隐藏的列编辑
作为开发人员,应该大部分都懂列编辑模式,最早接触使用列编辑模式是用UE,后来用了notepad++,列编辑模式也很顺手. 以前用eclipse编辑代码想用列编辑时还以为它不支持就打开notepad++ ...
- centos8.0安装docker
背景简介: 前两天红帽正式发布了RHEL8,网上同时也有了CentOS8,一直在接触容器方面,为了尝鲜,下载了CentOS8,并尝试安装docker,不料竟然还报了个错(缺少依赖),故及时记录一下,方 ...
- elasticsearch-py 解决 too_long_frame_exception 问题
elasticsearch-py 解决 too_long_frame_exception 问题 老大让我搞一搞数据统计,配环境时遇到个奇葩错误,记录一下,希望能帮助到某些人. 我需要安装 Elasti ...
- SpringBoot(3)自定义Filter
SpringBoot自动添加了OrderedCharacterEncodingFilter和HiddenHttpMethodFilter,当然我们可以自定 义Filter. 自定义Filter需要两个 ...