文档章节

highcharts 自适应div的宽度

tianyawhl
 tianyawhl
发布于 07/11 09:04
字数 288
阅读 132
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

如果窗口变化时,highcharts图表是自带自适应的,但是切换折叠菜单时,highchats图表并不自适应外层div的宽度。如何实现适应div的宽度?

在网上找到有个 reflow 的方法,我是在项目中引入的 highcharts-vue ,问题在于使用了highcharts-vue 如何获取图表对象

<highcharts id="chart" :options="chartOptions1" style="height:250px" ref="chart1"></highcharts>

获取图表对象---this.$refs.chart1.chart

自适应宽度方法 --  this.$refs.chart1.chart.reflow()

完整的流程

一、点击折叠按钮时store中保存折叠状态

<i class="fa fa-bars collapseBtn" style="margin-left:20px;color:#a3fbc3;" @click="handleCollapseClick"></i>
    handleCollapseClick() {
      this.isCollapse = !this.isCollapse;
      this.$store.commit("saveCollapse",this.isCollapse)
      this.asideWidth = this.asideWidth == "220px" ? "66px" : "220px";
    },
    saveCollapse(state, isCollapse) {
      state.isCollapse = isCollapse
    },

二、在页面中监听当前菜单折叠状态并执行reflow()方法

  watch: {
    isCollapse(newVal, oldVal) {
      console.log(newVal);
      this.$refs.chart1.chart.reflow()
      this.$refs.chart2.chart.reflow()
      //HighCharts.charts[0].reflow();
      //HighCharts.charts[1].reflow();
    }
  },

 

 

 

 

 

上一篇: vue 中使用threejs
下一篇: vue中引入Jquery
tianyawhl
粉丝 9
博文 308
码字总数 161544
作品 0
常州
前端工程师
私信 提问
加载中
请先登录后再评论。
JavaScript 模板引擎--fragment.js

Fragment.js 允许你加载 html 碎片到任何元素中,只需要使用 data-fragment 属性。 <div data-fragment="fragment.html"></div> 也可通过 JSON 进行加载,如: <div data-fragment-json="fra......

匿名
2013/03/24
2.4K
0
CSS 选择器--Q.js

1, 和Sizzle的兼容 Q(expr, context, result, seed) Q.matches 支持Sizzle特别的setFilter伪类如:even,:first,:last,:lt... 支持复杂的:not和:has选择器(和sizzle一样) 2, 结果的正确性 Si...

hackwaly
2012/10/23
4.6K
0
iOS 的 Canvas 和 Audio 实现--Ejecta

Ejecta 是一个快速开源的 JavaScript、Canvas 和 音频实现,适用于 iOS 平台。你可以把它想象成一个只支持显示 Canvas 元素的浏览器,它像一个浏览器却无需浏览器,适用于游戏和动画开发。无...

匿名
2012/10/26
4.4K
0
JQuery showDialog

使用方法: 先引入jquery库 版本不低于1.4.2 调用函数 showDialog(mode, msg, t, sd_width) 参数说明: 1, mode 模式 a. confirm [确认模式] b. info [显示信息] b. window [AJAX获取网页内容]...

匿名
2012/11/03
9.8K
0
高仿腾讯爱看

高仿腾讯爱看App中用户体验,包括App启动动画,和阅读列表交互效果。在阅读列表视图中,点击展开列表行(UITableViewCell),该列表行成为新视图展示更多内容。还可以收缩列表行返回之前阅读...

匿名
2013/05/21
1.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

在视图控制器之间传递数据 - Passing Data between View Controllers

问题: I'm new to iOS and Objective-C and the whole MVC paradigm and I'm stuck with the following: 我是iOS和Objective-C以及整个MVC范例的新手,但我坚持以下几点: I have a view th......

fyin1314
28分钟前
6
0
Elasticsearch中mapping值得注意的一些小细节

简介 在Elasticsearch中mapping有很多可以配置的地方,但是使用多了就会发现,一般情况有关mapping最常用、也最实用的就简单的几个需要注意的地方。 下面就简单的介绍一下关于这些mapping中值...

trayvon
32分钟前
0
0
趣味编程-大鱼吃小鱼(5-7岁)

上一节老师教小朋友们编写了摘星星的游戏,今天跟着了老师学一下大鱼吃小鱼这个游戏吧!拿上你们的平板,跟着老师一起来做吧。 防止失联,点个“在看”!多多转发分享是老师录制视频的动力哦...

rainbow0124
今天
1
0
大集合!写作辅助工具

↑公众号关注 “Graph-AI” 专注于 图机器学习 大集合!论文写作辅助工具 这里收集论文写作过程中的辅助工具,比如包括Latex、画图、图表、语法、词语搭配、文献查找\下载\整理、翻译等。 会...

chengsen
08/01
0
0
SSL指纹的自定义功能-VMLogin 中文版防关联指纹浏览器在1.2.6.7 版本更新中加入

VMLogin 中文版指纹浏览器 在本次1.2.6.7 版本更新中加入了SSL指纹的自定义功能。 VMLogin 中文版浏览器:https://www.vmlogin.cc/ 主要可以设置 密码套件 的个数和顺序,这样能可以对抗一些...

VMlogin中文版防关联浏览器
43分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部