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