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. python语言(三)文件修改、函数、json操作、监控日志代码、高效读取文件

    1.文件操作(2)   代码 f = open('a.txt','a') # "a" 如果源文件不在,会自动创建 f.write('abc') result = f.read() ...

  2. 接口调试工具Postman之自动同步Chrome cookies,实现自动登陆验证

    前言 在前后端分离开发时,做为后端开发人员,要求独立开发完成某个接口后,开发人员自己需要先测试通过后再提交给测试人员进行测试,否则会出现到测试人员哪里业务流程根本就走不通,或者BUG会过多的情况等. ...

  3. 比较两个CSV的方法的探索

    1.开始时,我用ultraEdit来简单比较,需要排序,而且比较的结果也有限 2.Excel也有这样的功能,可是好复杂 3.而后,发现dbeaver这个tools,利用JDBC Driver(csvj ...

  4. mysql和sqliet连接

    Python里Django框架数据库要配置1.setting已经自己配置好2.需要自己连接.找到setting里DATABASES进行连接自己数据库MySQL数据库连接 model里创建数据表就是Dj ...

  5. 在WinDbg中调试时如何查看类/结构对象成员的值

    有时,当您调试应用程序时,会碰巧得到指向类的指针,该类只有几个成员变量,包括结构和其他类对象!如何看待内部类/结构变量成员的值??所以,这是提示.下面是用于演示命令的代码. struct testSt ...

  6. ZROI 2020WC集训训练赛 Day4

    最后一场,幸好没有掉分,假装功德圆满吧. T1有各种数据结构做法,主要难点在优化空间. T2直接DP就完事了,然而记搜的复杂度是对的-- T3神仙最小割. 没错这篇文章就是咕了. pkuwc rp++ ...

  7. quick: setup_mac.sh分析

    //quick: setup_mac.sh分析 //quick: setup_mac.sh分析#!/bin/bash //获取并打印根目录QUICK_V3_ROOTDIR="$( cd &q ...

  8. oracle 如何判断字符串中是否包含中文?超级简单!

      1.情景展示 如何快速的判断出指定字符串中是否包含中文呢? 2.解决方案 通过length()和lengthb()函数的比对结果进行判断. lengthb(string)计算string所占的字节 ...

  9. java基础之 final

    参考文档: 内存模型&final:http://www.infoq.com/cn/articles/java-memory-model-6/   根据程序上下文环境,Java关键字final有 ...

  10. create-react-app项目暴露webpack配置文件

    create-react-app创建的react项目,webapck配置,默认情况下是在node_modules里面的,我们需要把它暴露到根目录上来. 执行 npm run eject 命令即可,一般 ...