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]}]})

正常了：

转载于:https://www.cnblogs.com/Han39/p/9517016.html

Highcharts 宽度溢出容器相关推荐

解决uni-app中flex布局子元素宽度溢出
在如下页面中,每一行使用flex布局,每行的头像宽度指定,右侧容器使用flex:1自适应,当name过长时,右侧容器宽度溢出. 页面布局如下 <view class="friend-l ...
解决textarea在ie浏览器下宽度溢出的问题
解决textarea在ie浏览器下宽度溢出的问题的方法是: 给textarea元素定义宽度,并且padding,margin,border都是0,而不是使用 textarea 元素的 rows和col ...
css 长单词不换行溢出容器的解决方法 word-wrap与word-break
这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是 ...
flutter 布局时内容溢出容器的类似Overflow-hidden的简单解决
最近初上手flutter,对很多组件都不熟悉,在做瀑布流的时候发现瀑布流item中使用column布局,不包装Image会导致图片直接溢出. 在网上搜索更好的解决方案,但是并没有找到有类似overfl ...
white-space: nowrap；导致宽度溢出
我希望的效果实际效果 <li class="title clearfix"> <i class="iconfont icon-right fl&quo ...
用JS解决多行溢出文本的省略问题
前言在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支 ...
Highcharts使用指南
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
CSS3 Flex布局弹性容器的属性
为了实现对弹性子元素的灵活控制,在弹性容器上定义了相关属性,通过这些属性来控制主轴的方向.子元素溢出后的行为.子元素的对齐方式等.这些属性见表 9‑2: 表 9-2 父元素属性属性说明 flex- ...
html溢出部分纵向滚动,html - 无法滚动到溢出包含的flex项目的顶部
html - 无法滚动到溢出包含的flex项目的顶部因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的 ...

Highcharts 宽度溢出容器

Highcharts 宽度溢出容器相关推荐

最新文章

热门文章