在图表中绘制多个彩色自定义符号

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()：XML::Simple

注意：这是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)
        }
      }
    },
    ...
  });
});