Highcharts-DataLabels连接器定制{直线} [英] Highcharts - DataLabels connector customization {Straight line}

问题描述

我正在使用Highcharts ...

如何自定义如下的dataLabels线路连接器?

尝试使用 softConnector:false ，但未获得所需的结果.

当我对此感到震惊时，任何帮助都将不胜感激:(

我期望的是

解决方案

您可以包装pie.prototype.drawDataLabels方法，并在此方法内部可以更改连接器使用的参数.

这是您需要更改的部分:

  connectorPath = softConnector?[Mx +(labelPos [6] ==='left'?5:-5)，y，//标签处字符串的结尾'C'，x，y，//第一个中断，在标签旁边2 * labelPos [2]-labelPos [4]，2 * labelPos [3]-labelPos [5]，labelPos [2]，labelPos [3]，//第二次休息L，labelPos [4]，labelPos [5]//基本]:[Mx +(labelPos [6] ==='left'?5:-5)，y，//标签处字符串的结尾L，labelPos [4]，y，//第二个中断L，labelPos [4]，labelPos [5]//基本]; 

在这里，您可以找到一个示例，说明如何使用此套图处理图表: http://jsfiddle.净/L6ywtj7z/5/

在Highcharts drawDataLabels方法中进行更改后，可以使用connectorPath方法更轻松地解决您的问题:http://jsfiddle.net/L6ywtj7z/15

I am using Highcharts...

How can I customize dataLabels line connector like below?

Tried with softConnector: false, but not getting the desired result though.

Any help highly appreciated as I am struck on this :(

Online Demo

Regular connector after using softConnector: false,

What I am expecting

解决方案

You can wrap pie.prototype.drawDataLabels method and inside this method you can change the parameters used by your connector.

This is a part you need to change:

connectorPath = softConnector ? [
          M,
          x + (labelPos[6] === 'left' ? 5 : -5), y, // end of the string at the label
          'C',
          x, y, // first break, next to the label
          2 * labelPos[2] - labelPos[4], 2 * labelPos[3] - labelPos[5],
          labelPos[2], labelPos[3], // second break
          L,
          labelPos[4], labelPos[5] // base
        ] : [
          M,
          x + (labelPos[6] === 'left' ? 5 : -5), y, // end of the string at the label
          L,
          labelPos[4], y, // second break
          L,
          labelPos[4], labelPos[5] // base
        ];

And here you can find an example how your chart will work with this wrap: http://jsfiddle.net/L6ywtj7z/5/

EDIT: After changes in Highcharts drawDataLabels method, it is possible to solve your issue much easier, using connectorPath method: http://jsfiddle.net/L6ywtj7z/15

这篇关于Highcharts-DataLabels连接器定制{直线}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！