如何使 highchart图表标题文字可选择复制

highchart图表的一个常见问题是不能复制文字

比如官网的某个图表例子，文字不能选择，也无法复制，有时产品会抓狂...

本文给出一个简单的方案，包括一些解决的思路，希望能帮助到有需要的人

初期想了蛮久也搜了蛮多，没搜到，找到的结论是图表使用的是svg实现，必然无法选择文字，似乎是个死问题，已经濒临放弃

不过后来又看到一篇讨论，其实svg里面的文字是可以选择复制的

顿时信心又来了，展开了新一轮思考

思考一：可能是姿势不对

试试把标题配成 useHTML: true ，使用普通元素渲染，结果还是无法选

看看DOM结构，实际上已经和svg无关了

思考二：会不会是设置了某些样式呢

跟选择复制有关的也就这俩了，直接赋上去，还是无效

思考三：会不会是有事件影响，取消了点击选择效果呢

为了测试的简便与纯粹性，最好直接使用官方提供的简单例子

查看元素对应的事件列表，有几个需要关注

选择highchart.js ，跳的不准呀，代码混淆之后貌似chrome的跳转一致都不太可靠了

思考四：什么js东西使得点击选择无效呢

可能是事件禁止了冒泡 stopPropagation，或者是取消了元素的事件默认处理机制 preventDefault

一搜，发现前者没找到，而后者有多处

定位到一个 mouseDown事件触发的位置，柳暗花明的感觉

试了一下可以发现，上下两处是关键点，直接造成文字选择功能失效了（当然这可能是作者的本意）

接下来就是验证环节，把这文件下下来本地，改好后（注释那俩地方）用Fiddler的文件映射功能，替换这个例子中的 highchart.js，妥妥的可以进行选择复制

思考五：如何运用在业务代码中？

在vue中使用的是npm的包管理，所以肯定不能直接改源代码，可选的一个方案是覆盖源代码，即覆盖这两个方法

    import Highcharts from "highcharts";// 重写Highcharts事件处理，使得内容可选择复制Highcharts.Pointer.prototype.onContainerMouseDown = function(a) {a = this.normalize(a);2 !== a.button && (this.zoomOption(a),// a.preventDefault && a.preventDefault(),this.dragStart(a))};Highcharts.Pointer.prototype.onContainerMouseMove = function(b) {// 整理变量let a = Highcharts;let B = Highcharts.charts;let q = function(a) {return "undefined" !== typeof a && null !== a};var c = this.chart;q(a.hoverChartIndex) && B[a.hoverChartIndex] && B[a.hoverChartIndex].mouseIsDown || (a.hoverChartIndex = c.index);b = this.normalize(b);// b.preventDefault || (b.returnValue = !1);"mousedown" === c.mouseIsDown && this.drag(b);!this.inClass(b.target, "highcharts-tracker") && !c.isInsidePlot(b.chartX - c.plotLeft, b.chartY - c.plotTop) || c.openMenu || this.runPointActions(b)};

找到对象是谁，这一步可以断点调试看this，或往上翻代码，其实是个Pointer.

通过分析可知，这个对象的Highcharts对象的一个子对象，我们也需要通过简单的判断来进行确认好

需要注意的是，代码中有一段用到了其他变量 q B a，所以在业务代码中覆盖的时候，我们需要另外提前赋值

q(a.hoverChartIndex) && B[a.hoverChartIndex] && B[a.hoverChartIndex].mouseIsDown || (a.hoverChartIndex = c.index);

通过一系列分析和断点查询，以及确认值的一致，就能保证能覆盖地正确

思考六：在vue中为何没有生效

然鹅并不是顺利的，在实际场景vue-highcharts中使用竟然没啥变化，一轮调试下来也没有走断点，

无可奈何只好去看下它的实现，看有没有什么突破口

源码很少，就是一层包装

但这里可以发现，如果没有传入highcharts，就会另外引入npm包来使用

所以很大可能是没传入这个属性，致使覆盖的Pointer并不是真正的图表Pointer

仔细检查代码，才发现前人留个个坑，把大写的属性改成小写之后，即可匹配上

当然，这个覆盖的方式是挺暴力的，可以根据需求加些判断处理，不过在现有业务中，不失为一个好办法

转载于:https://www.cnblogs.com/imwtr/p/11066595.html

如何使 highchart图表标题文字可选择复制相关推荐

解决wps如何只复制标题文字（不复制正文）
office好像提供直接右键点击标题选择复制.本地没有office不做过多阐述,重点说一下wps的这个问题. 公司有一个项目的数据结构文档,很大上千张表,包含数据结构等其他内容,现在是要这个文档中的所 ...
html5排版标题的标签,标题文字的排版技巧
以往我们分享过一些关于文字的编排方式,今天再细化的介绍标题文字的排版,一共介绍了12个案例技巧,并有作品演示更容易看懂,大家可以收藏以便日后设计时作为灵感之用. 接下来大家一起看看标题文字的排版的1 ...
word标题文字居中浅谈
在Word排版时,要将标题在文档居中,是有区别的,如下图在回车键后,在选择标题居中,我们常认为标题就是在整个文档居中了,但是实际上只是在回车键到右边区域居中而已,如上图红色方块居中. 只有在标题文字 ...
pyqt 取鼠标处文字_爱剪辑：炫彩的动态标题文字特效，这招让视频片头LOGO更酷炫...
爱剪辑学习委员会提醒您: 道路千万条,学习第一条. 教程不学会,制作两行泪. 今天教大家制作炫彩的动态标题文字特效,3步即可快速学会,让你立马不再流泪. 爱剪辑官网下载:http://www.aiji ...
jQuery标题文字淡入淡出显示效果
reveal-it.js是一款jQuery文字淡入淡出显示特效插件.该文字特效插件可以使文字从左向右淡入淡出显示.该jq插件小巧简单,非常适合用于制作标题文字的动画效果. 在线演示:http://ww ...
电商设计的文字的选择与排版
文字的选择与排版 1.作用 (1)文字在设计中的作用:文字在一个完整的设计作品中起到关联产品.介绍主题的作用 2.汉字分类 (1)衬线字体: a.横线比较细,竖线比较粗,笔画结束的时候会有一个三角形, ...
php文字添加投影,视频加动态标题文字视频标题文字添加阴影边框给视频加上炫酷的文字标题...
开篇就来点个题:今天的教程内容就是视频添加文字标题,虽然都是给视频加文字标题但是今天的和往常有点不太一样呢!软件中不仅自带了许多炫酷的标题模板外,还可以对文字标题进行编辑,给标题添加动态效果,修改文字 ...
微信小程序之子页面动态修改导航栏标题文字内容
在实际的项目开发中,一般我们页面导航栏的标题文字都不是固定的,而是根据场景需要动态设置的,这个如何实现呢.微信官方提供的方法如下: 1.设置动态的 onLoad: function (options) ...
linux 终端朗读,使Linux终端朗读文字的小技巧分享，linux终端
使Linux终端朗读文字的小技巧分享,linux终端这篇文章主要介绍了使Linux终端朗读文字的小技巧分享,主要依赖espeak这个软件,需要的朋友可以参考下对于那些不能文字朗读的设备,有个小工具可 ...

如何使 highchart图表标题文字可选择复制

如何使 highchart图表标题文字可选择复制相关推荐

最新文章

热门文章