рисование разноцветных пользовательских символов в старших чартах

Question

Мне нужно рисовать пользовательские маркеры на старшей диаграмме через определенные промежутки времени. Мне удалось создать пользовательскую панель, используя следующий JavaScript:

Highcharts.Renderer.prototype.symbols.hline = 
    function(x, y, width, height) {
        return ['M',x-30 ,y + height / 2,'L',x+width+30,y + width / 2];
    };

https://jsfiddle.net/jimmain/9gqca584/5/

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

В идеале я также хотел бы увеличить отступ под полосой (между полосой и осью X), но я не уверен, что ее можно увеличить независимо.

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

Answer 1

Путь SVG не может иметь границы, поэтому решение заключается в использовании renderer.rect(): https://jsfiddle.net/BlackLabel/9gqca584/43/

Примечание: это серия bar, поэтому диаграмма перевернута, что означает, что нам нужно поменять местами x по y и высоту по ширине.

Отрывок:

function addRect(chart) {
  return chart.renderer.rect(
    chart.yAxis[0].toPixels(5) - 4, // 4 = half width
    chart.xAxis[0].toPixels(0),
    8,
    5
  ).attr({
    fill: 'rgba(253,0,154,0.9)',
    stroke: 'black',
    'stroke-width': 2,
    zIndex: 5
  }).add();
}

function positionRect(chart, rect) {
  rect.animate({
    x: chart.yAxis[0].toPixels(5) - 4, // 4 = half width
    y: chart.xAxis[0].toPixels(0) - chart.series[0].points[0].pointWidth / 2,
    height: chart.series[0].points[0].pointWidth
  });
}

$(function() {
  $('#container').highcharts({
    legend: {
      enabled: false
    },
    chart: {
      type: 'bar',
      events: {
        load: function() {
          this.customRect = addRect(this);
          positionRect(this, this.customRect);
        },
        redraw: function() {
          positionRect(this, this.customRect)
        }
      }
    },
    ...
  });
});