highchart图表的一个常见问题是不能复制文字
比如官网的某个图表例子，文字不能选择，也无法复制，有时产品会抓狂...
本文给出一个简单的方案，包括一些解决的思路，希望能帮助到有需要的人
初期想了蛮久也搜了蛮多，没搜到，找到的结论是图表使用的是，似乎是个死问题，已经濒临放弃
不过后来又看到一篇讨论，其实
顿时信心又来了，展开了新一轮思考
思考一：可能是姿势不对
试试把标题配成 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
仔细检查代码，才发现前人留个个坑，把大写的属性改成小写之后，即可匹配上
当然，这个覆盖的方式是挺暴力的，可以根据需求加些判断处理，不过在现有业务中，不失为一个好办法
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论