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 ...
随机推荐
- Ansible自动部署tomcat
1.首先准备3台机器 ansible机器:192.168.52.34 目标主机:192.168.52.35 目标主机:192.168.52.36 2.关闭防火墙 [root@localhost ~]# ...
- BZOJ 3561: DZY Loves Math VI 莫比乌斯反演+复杂度分析
推到了一个推不下去的形式,然后就不会了 ~ 看题解后傻了:我推的是对的,推不下去是因为不需要再推了. 复杂度看似很大,但其实是均摊 $O(n)$ 的,看来分析复杂度也是一个能力啊 ~ code: #i ...
- bzoj3676 [Apio2014]回文串 卡常+SAM+树上倍增
bzoj3676 [Apio2014]回文串 SAM+树上倍增 链接 bzoj luogu 思路 根据manacher可以知道,每次暴力扩展才有可能出现新的回文串. 所以推出本质不同的回文串个数是O( ...
- 埃氏筛优化(速度堪比欧拉筛) + 洛谷 P3383 线性筛素数 题解
我们一般写的埃氏筛消耗的时间都是欧拉筛的三倍,但是欧拉筛并不好想(对于我这种蒟蒻) 虽然 -- 我 -- 也可以背过模板,但是写个不会的欧拉筛不如写个简单易懂的埃氏筛 于是就有了优化 这个优化还是比较 ...
- Spatiotemporal continuous estimates of PM2.5 concentrations in China, 2000–2016: A machine learning method with inputs from satellites, chemical transport model, and ground observations
写在前面 首先,看完查了一下这个期刊 Environment International,是1区的文章,影响因子7.297!不愧是优秀的期刊,文章质量很高,内容很丰富. 内容 主要是PM25反演,利用 ...
- navigator对象(了解即可)
navigator是window的子对象 navigator.appName // Web浏览器全称navigator.appVersion // Web浏览器厂商和版本的详细字符串navigator ...
- zabbix-常规配置
zabbix server:cat zabbix_server.confLogFile=/data/log/zabbix_server.logLogFileSize=250DebugLevel=3Pi ...
- [asm] 小菜汇编基础和学习技巧小结(一)
以下小结纯属小菜自学过程产生的dump,大神请飘过! 汇编是一门庞大复杂的学问,在计算机的世界里差不多无所不入.很多编程领域都会或多或少跟汇编打交道.本人不是科班出身的程序员,所以很多基础都为零,学历 ...
- arthas安装进docker
教程参照https://alibaba.github.io/arthas/arthas-tutorials mkdir /opt/downloads -pmkdir /opt/arthas -p下载地 ...
- python skimage图像处理(二)
python skimage图像处理(二) This blog is from: https://www.jianshu.com/p/66e6261f0279 图像简单滤波 对图像进行滤波,可以有两 ...