Метки данных с формой «выноски» пропускают указывающий треугольник для короткого текста

Question

Для коротких меток (1-2 символа) форма выноски отображается без указателя, что может привести к путанице в сложных диаграммах.Можно ли это как-то исправить?

Обновление 1:

Редактор: https://stackblitz.com/edit/js-s6upn2

Результат: https://js -s6upn2.stackblitz.io

Обновление 2 (исправлено):

по вертикали сверху и снизуОбработка с выравниванием, редактор обновлен

Highcharts.SVGRenderer.prototype.symbols.callout = function(x, y, w, h, options) {
    const arrowLength = 6;
    const halfDistance = 6;
    const r = Math.min((options && options.r) || 0, w, h);
    // const safeDistance = r + halfDistance;
    const anchorX = options && options.anchorX;
    const anchorY = options && options.anchorY;

    const path = [
        'M', x + r, y,
        'L', x + w - r, y, // top side
        'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
        'L', x + w, y + h - r, // right side
        'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner
        'L', x + r, y + h, // bottom side
        'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
        'L', x, y + r, // left side
        'C', x, y, x, y, x + r, y // top-left corner
    ];

    path.splice(
        anchorY >= 0 ? 23 : 3,
        3,
        'L', anchorX + halfDistance > x + w ? x + w : anchorX + halfDistance, anchorY >= 0 ? y + h : y,
        anchorX, anchorY >= 0 ? y + h + arrowLength : y - arrowLength,
        anchorX - halfDistance >= x ? anchorX - halfDistance : x, anchorY >= 0 ? y + h : y,
        x + r, anchorY >= 0 ? y + h : y
    );

    return path;
};

Update3

На самом деле похоже, что эта реализация должна обрабатывать гораздо больше угловых случаев, например, она ломает всплывающие подсказки типа "split"

Поэтому я предлагаю назвать эту форму "callout2" и использовать ее только для меток данных сверху / снизу.

Answer 1

Эта проблема выглядит как ошибка, поэтому я сообщил о ней на github Highcharts: https://github.com/highcharts/highcharts/issues/10020

Чтобы обойти это, вы можете переписать callout shape:

Highcharts.SVGRenderer.prototype.symbols.callout = function(x, y, w, h, options) {
    var arrowLength = 6,
        halfDistance = 6,
        r = Math.min((options && options.r) || 0, w, h),
        safeDistance = r + halfDistance,
        anchorX = options && options.anchorX,
        anchorY = options && options.anchorY,
        path;

    path = [
        'M', x + r, y,
        'L', x + w - r, y, // top side
        'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
        'L', x + w, y + h - r, // right side
        'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-rgt
        'L', x + r, y + h, // bottom side
        'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
        'L', x, y + r, // left side
        'C', x, y, x, y, x + r, y // top-left corner
    ];

    path.splice(
        23,
        3,
        'L', anchorX + halfDistance, y + h,
        anchorX, y + h + arrowLength,
        anchorX - halfDistance, y + h,
        x + r, y + h
    );

    return path;
}

Демонстрация в реальном времени:http://jsfiddle.net/BlackLabel/o0j76Lbt/