Highcharts折线图，系列和标签之间具有连接器

Question

我正在使用带有一些自定义代码的Highcharts编辑器，并且有一个包含20多个系列的折线图。每个系列的末尾都有一个标签（系列名称）。由于系列彼此之间非常接近，因此无法显示所有对应的标签，因为它们相互重叠。我想启用每个系列和相应标签之间的连接线。

我尝试了connectorAllowed: true和enabled: true，但是从JS API参考网页上，这些选项仅适用于饼图。 这是我的代码：

<div id="highcharts-3fa2171d-2ddd-49f5-898d-daef17b342b4"></div><script>
(function(){ var files = ["https://code.highcharts.com/stock/highstock.js","https://code.highcharts.com/highcharts-more.js","https://code.highcharts.com/highcharts-3d.js","https://code.highcharts.com/modules/data.js","https://code.highcharts.com/modules/exporting.js","https://code.highcharts.com/modules/funnel.js","https://code.highcharts.com/modules/annotations.js","https://code.highcharts.com/modules/solid-gauge.js"],loaded = 0; if (typeof window["HighchartsEditor"] === "undefined") {window.HighchartsEditor = {ondone: [cl],hasWrapped: false,hasLoaded: false};include(files[0]);} else {if (window.HighchartsEditor.hasLoaded) {cl();} else {window.HighchartsEditor.ondone.push(cl);}}function isScriptAlreadyIncluded(src){var scripts = document.getElementsByTagName("script");for (var i = 0; i < scripts.length; i++) {if (scripts[i].hasAttribute("src")) {if ((scripts[i].getAttribute("src") || "").indexOf(src) >= 0 || (scripts[i].getAttribute("src") === "http://code.highcharts.com/highcharts.js" && src === "https://code.highcharts.com/stock/highstock.js")) {return true;}}}return false;}function check() {if (loaded === files.length) {for (var i = 0; i < window.HighchartsEditor.ondone.length; i++) {try {window.HighchartsEditor.ondone[i]();} catch(e) {console.error(e);}}window.HighchartsEditor.hasLoaded = true;}}function include(script) {function next() {++loaded;if (loaded < files.length) {include(files[loaded]);}check();}if (isScriptAlreadyIncluded(script)) {return next();}var sc=document.createElement("script");sc.src = script;sc.type="text/javascript";sc.onload=function() { next(); };document.head.appendChild(sc);}function each(a, fn){if (typeof a.forEach !== "undefined"){a.forEach(fn);}else{for (var i = 0; i < a.length; i++){if (fn) {fn(a[i]);}}}}var inc = {},incl=[]; each(document.querySelectorAll("script"), function(t) {inc[t.src.substr(0, t.src.indexOf("?"))] = 1; }); function cl() {if(typeof window["Highcharts"] !== "undefined"){var options={"title":{"text":"30-day female mortality rates at age 45"},"subtitle":{"text":"Calendar period: 1996 - 2014"},"exporting":{},"chart":{"type":"line","height":null,"ignoreHiddenSeries":true,"showAxes":false,"spacingRight":75,"spacingTop":10},"series":[{"name":"NHL","turboThreshold":0,"_colorIndex":0,"_symbolIndex":0,"dataLabels":{"allowOverlap":false},"marker":{},"color":null},{"name":"bladder","turboThreshold":0,"_colorIndex":1,"_symbolIndex":1},{"name":"brain","turboThreshold":0,"_colorIndex":2,"_symbolIndex":2},{"name":"breast","turboThreshold":0,"_colorIndex":3,"_symbolIndex":3},{"name":"cervix","turboThreshold":0,"_colorIndex":4,"_symbolIndex":4},{"name":"colon","turboThreshold":0,"_colorIndex":5,"_symbolIndex":0},{"name":"hodgkin","turboThreshold":0,"_colorIndex":6,"_symbolIndex":1},{"name":"kidney","turboThreshold":0,"_colorIndex":7,"_symbolIndex":2},{"name":"larynx","turboThreshold":0,"_colorIndex":8,"_symbolIndex":3},{"name":"leukaemia","turboThreshold":0,"_colorIndex":9,"_symbolIndex":4,"marker":{},"color":"#546e7a"},{"name":"liver","turboThreshold":0,"_colorIndex":0,"_symbolIndex":0},{"name":"lung","turboThreshold":0,"_colorIndex":1,"_symbolIndex":1,"dataLabels":{"allowOverlap":true,"enabled":true},"allowOverlapX":false},{"name":"melanoma","turboThreshold":0,"_colorIndex":2,"_symbolIndex":2},{"name":"mesothelioma","turboThreshold":0,"_colorIndex":3,"_symbolIndex":3},{"name":"myeloma","turboThreshold":0,"_colorIndex":4,"_symbolIndex":4},{"name":"oesophagus","turboThreshold":0,"_colorIndex":5,"_symbolIndex":0},{"name":"ovary","turboThreshold":0,"_colorIndex":6,"_symbolIndex":1},{"name":"pancreas","turboThreshold":0,"_colorIndex":7,"_symbolIndex":2},{"name":"rectum","turboThreshold":0,"_colorIndex":8,"_symbolIndex":3,"dataLabels":{"allowOverlap":true}},{"name":"stomach","turboThreshold":0,"_colorIndex":9,"_symbolIndex":4,"marker":{},"color":"#651fff"},{"name":"thyroid","turboThreshold":0,"_colorIndex":0,"_symbolIndex":0,"marker":{},"color":"#cddc39"},{"name":"uterus","turboThreshold":0,"_colorIndex":1,"_symbolIndex":1,"marker":{},"color":"#d500f9"}],"plotOptions":{"series":{"dataLabels":{"enabled":true},"animation":false},"line":{"dataLabels":{"allowOverlap":true,"enabled":false,"inside":false,"shadow":false,"align":"left","crop":false,"padding":5,"verticalAlign":"middle","overflow":"none","rotation":0,"x":2,"y":0,"zIndex":6},"label":{"connectorNeighbourDistance":24,"connectorAllowed":true,"enabled":true,"onArea":false},"marker":{"enabled":true}}},"pane":{"background":[]},"responsive":{"rules":[]},"xAxis":[{"type":"category","tickmarkPlacement":"on","title":{"text":"Calendar period"},"labels":{},"opposite":false}],"yAxis":[{"title":{"text":"Mortality"},"labels":{},"type":"linear"}],"legend":{"layout":"vertical","align":"right","enabled":false,"floating":false},"credits":{"enabled":false},"tooltip":{},"data":{"csv":"\"year\";\"NHL\";\"bladder\";\"brain\";\"breast\";\"cervix\";\"colon\";\"hodgkin\";\"kidney\";\"larynx\";\"leukaemia\";\"liver\";\"lung\";\"melanoma\";\"mesothelioma\";\"myeloma\";\"oesophagus\";\"ovary\";\"pancreas\";\"rectum\";\"stomach\";\"thyroid\";\"uterus\"\n1996;2.2;1;4.8;0.7;1.3;2.5;1;2.9;1.2;3.8;7.5;5.5;0.2;2.4;2.8;2.4;2.9;6.6;1.4;3.6;1.5;0.7\n1997;2.1;1;4.6;0.6;1.3;2.3;1;2.7;1.1;3.7;7.2;5.3;0.2;2.3;2.6;2.3;2.8;6.4;1.3;3.5;1.4;0.7\n1998;2;1;4.4;0.6;1.2;2.2;1;2.6;1.1;3.5;6.9;5.1;0.2;2.2;2.4;2.2;2.7;6.2;1.3;3.3;1.4;0.7\n1999;1.9;1;4.2;0.5;1.2;2.1;0.9;2.4;1;3.4;6.7;4.9;0.2;2.1;2.2;2.1;2.6;6.1;1.2;3.2;1.3;0.6\n2000;1.9;1;4;0.5;1.2;2;0.9;2.3;1;3.3;6.4;4.7;0.2;2.1;2.1;2;2.5;5.9;1.2;3.1;1.3;0.6\n2001;1.8;1;3.8;0.5;1.1;1.9;0.8;2.1;1;3.2;6.2;4.5;0.2;2;1.9;2;2.5;5.8;1.1;3;1.2;0.6\n2002;1.7;1;3.6;0.4;1.1;1.8;0.8;2;0.9;3.1;6;4.4;0.2;1.9;1.8;1.9;2.4;5.6;1.1;2.9;1.2;0.5\n2003;1.7;1;3.5;0.4;1.1;1.7;0.8;1.9;0.9;3;5.8;4.2;0.2;1.9;1.6;1.8;2.3;5.5;1;2.8;1.1;0.5\n2004;1.6;0.9;3.3;0.4;1;1.6;0.7;1.8;0.9;2.9;5.6;4.1;0.1;1.8;1.5;1.7;2.2;5.3;1;2.7;1.1;0.5\n2005;1.5;0.9;3.1;0.3;1;1.6;0.7;1.7;0.8;2.8;5.4;3.9;0.1;1.7;1.4;1.7;2.1;5.2;0.9;2.6;1;0.5\n2006;1.5;0.9;3;0.3;1;1.5;0.7;1.6;0.8;2.7;5.2;3.8;0.1;1.7;1.3;1.6;2;5.1;0.9;2.5;1;0.5\n2007;1.4;0.9;2.8;0.3;0.9;1.4;0.6;1.5;0.8;2.6;5;3.6;0.1;1.6;1.2;1.5;2;4.9;0.9;2.4;0.9;0.4\n2008;1.4;0.9;2.7;0.3;0.9;1.3;0.6;1.4;0.7;2.5;4.8;3.5;0.1;1.6;1.1;1.5;1.9;4.8;0.8;2.3;0.9;0.4\n2009;1.3;0.9;2.6;0.2;0.9;1.3;0.6;1.3;0.7;2.5;4.6;3.4;0.1;1.5;1;1.4;1.8;4.7;0.8;2.2;0.9;0.4\n2010;1.3;0.9;2.5;0.2;0.8;1.2;0.6;1.3;0.7;2.4;4.4;3.2;0.1;1.5;1;1.4;1.8;4.6;0.7;2.2;0.8;0.4\n2011;1.2;0.9;2.3;0.2;0.8;1.2;0.5;1.2;0.6;2.3;4.3;3.1;0.1;1.4;0.9;1.3;1.7;4.4;0.7;2.1;0.8;0.4\n2012;1.2;0.9;2.2;0.2;0.8;1.1;0.5;1.1;0.6;2.2;4.1;3;0.1;1.4;0.8;1.3;1.6;4.3;0.7;2;0.8;0.4\n2013;1.1;0.9;2.1;0.2;0.7;1;0.5;1;0.6;2.2;4;2.9;0.1;1.3;0.8;1.2;1.6;4.2;0.6;1.9;0.7;0.3\n2014;1.1;0.9;2;0.2;0.7;1;0.5;1;0.6;2.1;3.8;2.8;0.1;1.3;0.7;1.2;1.5;4.1;0.6;1.9;0.7;0.3","googleSpreadsheetKey":false,"googleSpreadsheetWorksheet":false}};
Highcharts.merge(true, options, {
  plotOptions: {
series: {
  dataLabels: {
    enabled: true,
    connectorAllowed: true,
    formatter: function () {
      // if last point
      if(this.point === this.series.data[this.series.data.length-1]) {
        return '<span style="color:'+this.series.color+'">'+this.series.name;
      }
    }
  }
}
   }
});
new Highcharts.Chart("highcharts-3fa2171d-2ddd-49f5-898d-daef17b342b4", 
options);}}})();
</script>

我想在每个系列和相应的标签之间有一条连接线，以便区分每个系列及其名称。 非常感谢您的帮助！！！

这是我的代码的JSfiddle link。