highcharts图表切换后不能自适应百分比宽度

最新推荐文章于 2021-12-21 14:42:15 发布

转载最新推荐文章于 2021-12-21 14:42:15 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3052153/blog/847037

文章标签：

#javascript #ViewUI

本文介绍了解决Highcharts图表在不同Tab间切换时无法自适应屏幕尺寸的问题。通过在Tab激活时重新调用reflow函数，使图表能够适应当前窗口大小。

highcharts图表在页面block时，图表大小可以随意设置大小，当一开始隐藏图表，随后tab切换出图表时，往往大小不能自适应页面，然后给highcharts图设置width的话，是可以设置大小，但是不能自适应到100%。然后按F12，图片就自适应到100%了。

解决办法

在激活tab的时候重新调用reflow函数，就ok了。在点击tab切换时添加以下代码：

$("图表ID").highcharts().reflow();  //重新调用reflow函数

转载于:https://my.oschina.net/u/3052153/blog/847037

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenwei2263

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Highcharts 配置选项详细说明

实践求真知

12-08

776

一参数配置 chart.events.addSeries：添加数列到图表中。 chart.events.click：整个图表的绘图区上所发生的点击事件。 chart.events.load：图表加载事件。 chart.events.redraw：图表重画事件，当点击图注显示和隐藏绘图时可以触发。 chart.events.selection：当图表曲线可选择...

highcharts点击切换，不能自适应宽度

weixin_30932215的博客

02-15

212

$(".date-tab").on("click","a",function(){ $(this).addClass("cur").siblings("a").removeClass("cur"); $(".date-qushi").eq($(this).index()).show().siblings(".date-qushi").hide(); var...

参与评论您还未登录，请先登录后发表或查看评论

解决highcharts在ie兼容模式下宽度100%不能自适应

满大人的博客

07-10

523

在ie兼容模式下使用highcharts设置容器宽度为100%，打开f12容器宽度正常，里面一层的宽度变为100px，ie9及以上不会出现此问题。 html <div id="chartsId" style="width:100%;height:200px"></div> js:获取数据，填充数据解决方法1 ：给容器定义一个最小宽度（大小刚好放下图就可以，单位为px），...

Highcharts中的宽度自适应问题详解--源码分析

vito0705的博客

03-24

3812

目录阅读前须知问题分析官网调研源码分析解决方案官网提供的`reflow()`主动触发`window`的`resize`事件结论阅读前须知在本文你将得到以下信息：导致Highcharts图表宽度无法自适应的根本原因解决chart宽度自适应的两种方法如何主动触发DOM事件如有任何疑问或问题，欢迎探讨~ 问题今天在实现div元素的sizable的功能是，发现一个问题：作为contai...

highchart宽度自适应的问题-图表压缩到一起

weixin_30915951的博客

03-30

339

之前有个项目用到highchart展示图表。由于图比较多，便做了一个可以根据需要使图进行自动伸展和收缩的按钮，当点击收缩时，图slideup收缩起来。这个时候出现了一个问题，当图收缩后，再展示的时候，highchart生成的图变形了。。。。oh mygod~~~ 我们来一起思考一下，变形的表象是什么？审查元素可知，是宽度小了。宽度小了，图里面的元素挤压到了一起，形成了一个小块，...

HighChart（二）图表自适应容器

前端产品工程师

04-14

3613

最近项目中有的图表由于刻度的原因已经超出所在容器，会有部分图表超出普通界限。解决方案： HighChart图表自适应容器代码： var chart = $('#container').highcharts(); chart.reflow();

highcharts生成的图表放在一个宽度可拉伸缩小的div中，如何让他的宽度自适应div的宽度

07-23

我们正在讨论如何让Highcharts图表宽度自适应其容器div的宽度变化。根据引用[1]和引用[2]，我们可以使用Highcharts的`reflow`方法来实现。以下是具体步骤： ### 方法一：使用Highcharts的`reflow`方法 1. **获取...

highcharts的扇形图pie如何设置自适应的图形

最新发布

12-13

2. 图表自身自适应：Highcharts提供了`chart.reflow()`方法，可以在容器大小改变时重新调整图表大小。 3. 响应式设计：通过Highcharts的响应式规则（responsive.rules）来调整不同屏幕尺寸下的图表样式。具体步骤...

Highcharts图表工具的源码解读与应用

- **响应式设计**：Highcharts 图表可以自适应浏览器大小，适合不同分辨率的显示设备。 - **跨浏览器兼容性**：支持包括 IE6 在内的所有主流浏览器。 - **无障碍访问**：图表遵循 WAI-ARIA 标准，确保残障人士也...

最新highcharts中文API.pdf

09-06

Highcharts是一款流行的JavaScript图表库，它提供了一系列易于使用的接口，用于在Web页面中生成各种...通过上述选项的组合使用，开发者能够灵活地定制highcharts图表的外观和行为，以满足各种复杂的数据可视化需求。

Echarts图表初次加载时，显示不全

在下魔王ii的博客

10-15

2355

首先，我这里设置的width="100%"，首次加载当前页会出现，图表超出容器的现象：但是，刷新一下或者按下F12弹出控制台就恢复了；why???????????? 1.起初想从width入手进行分析，给echart组件增加div包裹或者添加内部的padding，无果； 2.鉴于echart的自带resize方法，这也是为啥刷新和F12都能触发恢复的原因；解决：于是，在echart引入的当前页面，手动来触发一下window.resize()就完美解决了这个问题， const myEvent

highCharts 图表大小自适应

string佳佳的博客

12-21

3823

注意！！一定要记得清除监听事件！！不然在别的页面会报错情景一：未封装组件参考事例请见这篇博客：https://blog.csdn.net/weixin_44171757/article/details/121948036 情景二：封装了组件在封装的vue组件内使用reflow() <template> <div class="x-bar" style="width: 100%"> <div :id="id" :style="setStyle()" :optio

hightchart 图表自适应 reflow()

何良语的博客

07-31

4959

在项目中遇到highchart图表在其容器盒子宽高变化时图表重绘的问题，为了体验效果，要求图表自适应容器变化，而不是图表重新加载在highchart的api文档中查找到了reflow()方法可以自适应，但是使用之后发现没有作用，因为找不到相关资料，所以自行解决了这个问题，猜测是因为图表的容器盒子宽高使用的是百分比： .chartcontanier{ width: 100%; ...

如何动态改变Highcharts图表的大小

追求专业

06-02

6273

如何动态改变Highcharts图表的大小设置chart的margin属性，代码如下所示；view sourceprint?$(function () {$('#container').highcharts({chart: {type: 'line',margin: [0, 0, 0, 0] //距离上下左右的距离值},xAxis: {categories: ['Jan', 'Feb...

highcharts：如何让highcharts图表自适应浏览器窗体

textboy的专栏

05-06

7748

参考了一些： http://www.stepday.com/topic/?740 最终自已的例子，e.g. //设置统计图形的宽度 var screenWidth = $("body").width(); $(".highchartImg").each(function(){ $(this).width(screenWidth*0.555); }); drawL

Highcharts的自适应DOM或者DIV，JS方法实现

公众号@极客密码

12-12

1188

那我们就按照官网的一分钟极速入门代码来说 // 图表配置 var options = { chart: { type: 'bar' //指定图表的类型，默认是折线图（line） }, title: { text: '我的第一个图表' // 标题 }, xAxis: { categories: ['苹果', '香蕉', '橙子'] // x 轴分类 ...

[转]highcharts图表入门之：如何让highcharts图表自适应浏览器窗体的大小或者页面大小...

weixin_34123613的博客

03-01

1464

本文转自： http://jsfiddle.net/vCZ8V/1/ http://www.stepday.com/topic/?740 http://blog.csdn.net/yueritian/article/details/30777351 <html> <head> <title>H...

Highchart自适应div，随div大小变化而变化

notHavaBug的博客

05-07

4804

Highchart自适应div，随div大小变化而变化 hightchart自适应div jsp代码块 div： <div id="chartsdiv" style="width:500px;height:300px;"> js代码块 div： var chart = $('#chartsdiv').highcharts(); chart.refl...

highcharts折线图基本使用

obj_null的博客

12-14

2927

折线图，画完，发现设置max值，但数据里面同时有多个数据为max值，连接起来得线会只显示一半