如何使 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

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

 

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