Highcharts Текст Bubble

Question

У меня есть изображение, как так:

Я использую флаги для текста пузыри так:

{ 
    type: 'flags', 
    y: yPosition, 
    name: 'Flags on series', 
    showInLegend: false, 
    data: [{ 
    x: xPosition, 
    title: '<span class="status-legend ' + $filter('status')(impactType) + '"></span>'+'<span style="font-size: 14px; font-family: \'MyriadPro-Regular\'; color: white">' + date + ': ' + title + '</span><br>' + text + '<br>' + impact + '<br>' 
    }], 
    shape: 'squarepin', 
    style: { 
    fontSize: '12px', 
    fontWeight: 'normal', 
    fontFamily: 'MyriadPro-Regular', 
    textAlign: 'left', 
    color: '#E7E7E7' 
    }, 
    fillColor: 'rgba(151, 151, 151, 1)', 
    color: 'rgba(151, 151, 151, 1)', 
    useHTML: true, 
    zIndex: zIndex, 
    states: { 
    hover: { 
     enabled: false 
    } 
    } 
} 

Моя проблема заключается в том, что линия проходит весь путь к снизу, вместо остановки на красном круге. Я не могу придумать умный способ остановить линию.

Некоторые вещи, которые я пробовал:

1. Использование onSeries Highstock в - Вопрос здесь является позиция пузыря в настоящее время базируется на yPosition против расположения окружности. Я написал логику, чтобы не помещать две коробки друг на друга, и эта логика намного сложнее и строже, если у всех есть разные начальные местоположения. Это затруднительно из-за того, что значение y флага является значением пикселя, а не шкалой yAxis.

2. Использование интервала флага - Это работает только с флагами с одинаковым значением, флаги слева или справа будут перекрываться.

3. Используйте линейный график, который идет от красной точки в текстовом пузырь - Вопрос здесь опять же, положение красной точки можно легко найти, так как я знаю, что это значение YAxis, но позиция текстового пузырька снова значение пикселя, а не в том же масштабе, что и yAxis.

Я просто искал любой способ, чтобы показать текст пузырей, чтобы они не дублировали. Моя лучшая надежда, я бы предположила, есть какой-то способ, которым я могу использовать шкалу yAxis на флагах, или есть какой-то другой метод, который я могу разместить в Text Bubbles, которые используют масштаб yAxis.

Ищите любые предложения. Благодаря!

Answer 1

Добавить onSeries флаги, See Here. Вам нужно заполнить это идентификатором серии, иначе, если он пуст, он будет рисовать на оси X. Also See

{ 
    type: 'flags', 
    y: yPosition, 
    name: 'Flags on series', 
    showInLegend: false, 
    onSeries : '', 
    data: [{ 
    x: xPosition, 
    title: '<span class="status-legend ' + $filter('status')(impactType) + '"></span>'+'<span style="font-size: 14px; font-family: \'MyriadPro-Regular\'; color: white">' + date + ': ' + title + '</span><br>' + text + '<br>' + impact + '<br>' 
    }], 
    shape: 'squarepin', 
    style: { 
    fontSize: '12px', 
    fontWeight: 'normal', 
    fontFamily: 'MyriadPro-Regular', 
    textAlign: 'left', 
    color: '#E7E7E7' 
    }, 
    fillColor: 'rgba(151, 151, 151, 1)', 
    color: 'rgba(151, 151, 151, 1)', 
    useHTML: true, 
    zIndex: zIndex, 
    states: { 
    hover: { 
     enabled: false 
    } 
    } 
}