highchart圖表的一個(gè)常見問題是不能復(fù)制文字

比如官網(wǎng)的某個(gè)圖表例子，文字不能選擇，也無法復(fù)制，有時(shí)產(chǎn)品會(huì)抓狂...

本文給出一個(gè)簡(jiǎn)單的方案，包括一些解決的思路，希望能幫助到有需要的人

?

?

初期想了蠻久也搜了蠻多，沒搜到，找到的結(jié)論是圖表使用的是svg實(shí)現(xiàn)，必然無法選擇文字，似乎是個(gè)死問題，已經(jīng)瀕臨放棄

不過后來又看到一篇討論，其實(shí)svg里面的文字是可以選擇復(fù)制的

頓時(shí)信心又來了，展開了新一輪思考

?

?

思考一：可能是姿勢(shì)不對(duì)

試試把標(biāo)題配成 useHTML: true ，使用普通元素渲染，結(jié)果還是無法選

?

?

?

看看DOM結(jié)構(gòu)，實(shí)際上已經(jīng)和svg無關(guān)了

思考二：會(huì)不會(huì)是設(shè)置了某些樣式呢

跟選擇復(fù)制有關(guān)的也就這倆了，直接賦上去，還是無效

思考三：會(huì)不會(huì)是有事件影響，取消了點(diǎn)擊選擇效果呢

為了測(cè)試的簡(jiǎn)便與純粹性，最好直接使用官方提供的簡(jiǎn)單例子

查看元素對(duì)應(yīng)的事件列表，有幾個(gè)需要關(guān)注

選擇highchart.js ，跳的不準(zhǔn)呀，代碼混淆之后貌似chrome的跳轉(zhuǎn)一致都不太可靠了

思考四：什么js東西使得點(diǎn)擊選擇無效呢

可能是事件禁止了冒泡 stopPropagation，或者是取消了元素的事件默認(rèn)處理機(jī)制 preventDefault

一搜，發(fā)現(xiàn)前者沒找到，而后者有多處

定位到一個(gè) mouseDown事件觸發(fā)的位置，柳暗花明的感覺

試了一下可以發(fā)現(xiàn)，上下兩處是關(guān)鍵點(diǎn)，直接造成文字選擇功能失效了（當(dāng)然這可能是作者的本意）

接下來就是驗(yàn)證環(huán)節(jié)，把這文件下下來本地，改好后（注釋那倆地方）用Fiddler的文件映射功能，替換這個(gè)例子中的 highchart.js，妥妥的可以進(jìn)行選擇復(fù)制

?

思考五：如何運(yùn)用在業(yè)務(wù)代碼中？

在vue中使用的是npm的包管理，所以肯定不能直接改源代碼，可選的一個(gè)方案是覆蓋源代碼，即覆蓋這兩個(gè)方法

import Highcharts from "highcharts";// 重寫Highcharts事件處理，使得內(nèi)容可選擇復(fù)制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)};

?

找到對(duì)象是誰，這一步可以斷點(diǎn)調(diào)試看this，或往上翻代碼，其實(shí)是個(gè)Pointer.?

通過分析可知，這個(gè)對(duì)象的Highcharts對(duì)象的一個(gè)子對(duì)象，我們也需要通過簡(jiǎn)單的判斷來進(jìn)行確認(rèn)好

?需要注意的是，代碼中有一段用到了其他變量 q? B? a，所以在業(yè)務(wù)代碼中覆蓋的時(shí)候，我們需要另外提前賦值

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

通過一系列分析和斷點(diǎn)查詢，以及確認(rèn)值的一致，就能保證能覆蓋地正確

?

思考六：在vue中為何沒有生效

然鵝并不是順利的，在實(shí)際場(chǎng)景vue-highcharts中使用竟然沒啥變化，一輪調(diào)試下來也沒有走斷點(diǎn)，

無可奈何只好去看下它的實(shí)現(xiàn)，看有沒有什么突破口

源碼很少，就是一層包裝

但這里可以發(fā)現(xiàn)，如果沒有傳入highcharts，就會(huì)另外引入npm包來使用

所以很大可能是沒傳入這個(gè)屬性，致使覆蓋的Pointer并不是真正的圖表Pointer

仔細(xì)檢查代碼，才發(fā)現(xiàn)前人留個(gè)個(gè)坑，把大寫的屬性改成小寫之后，即可匹配上

?

當(dāng)然，這個(gè)覆蓋的方式是挺暴力的，可以根據(jù)需求加些判斷處理，不過在現(xiàn)有業(yè)務(wù)中，不失為一個(gè)好辦法

?

轉(zhuǎn)載于:https://www.cnblogs.com/imwtr/p/11066595.html

總結(jié)

以上是生活随笔為你收集整理的如何使 highchart图表标题文字可选择复制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。