javascript - 在 Highcharts 中的条形之间绘制符号

Question

我想在条形之间绘制一个符号，如图所示在 highcharts 中可以吗？

Answer 1

您可以创建一个三 Angular 形作为自定义形状，然后使用该形状并将其设置为散点(或固定位置或其他选项)。这是关于创建形状的一个很好的答案:https://stackoverflow.com/a/27591082/8376046

创建自定义三 Angular 形:

Highcharts.SVGRenderer.prototype.symbols.supertri = function(x, y, w, h) {
  return ['M', x + w/2, y - h,
    'l', w, h,
    's', w * 1.1, h * 0.9, w * 0.1,  h * 1.8,
    'l', -w , h,
    's', -w * 2.0, h * 2.3,  -w * 1.8,  -h * 0.5,
    'l', w * 0, -h * 3.4,
    's', -w * 0.1,  -h * 2.0,  w * 1.5, -h * 0.1,
    'z'
  ];
};
if (Highcharts.VMLRenderer) {
  Highcharts.VMLRenderer.prototype.symbols.supertri = Highcharts.SVGRenderer.prototype.symbols.supertri;
}

创建一个假系列以使用此形状:

series: [
  ...
  ,{
    type: 'scatter',
    pointStart: 0.5,
    data: [20,20,20],
    marker: {
      symbol: 'supertri',
      radius: 2,
      fillColor: 'black'
    },
    showInLegend: false,
    enableMouseTracking: false
}]

Highcharts.SVGRenderer.prototype.symbols.supertri = function(x, y, w, h) {
    return ['M', x + w/2, y - h,
      'l', w, h,
      's', w * 1.1, h * 0.9, w * 0.1,  h * 1.8,
      'l', -w , h,
      's', -w * 2.0, h * 2.3,  -w * 1.8,  -h * 0.5,
      'l', w * 0, -h * 3.4,
      's', -w * 0.1,  -h * 2.0,  w * 1.5, -h * 0.1,
      'z'
    ];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.supertri = Highcharts.SVGRenderer.prototype.symbols.supertri;
  }
  chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'column',
    },
    yAxis: {
      title: {
        text: 'axis title',
        useHTML: true,
        style: {
          "-webkit-transform": "rotate(90deg)",
          "-moz-transform": "rotate(90deg)",
          "-o-transform": "rotate(90deg)"
        }
      }
    },
    series: [{
      data: [80, 40, 20, 10],
      }, {
      	type: 'scatter',
        pointStart: 0.5,
        data: [20,20,20],
        marker: {
          symbol: 'supertri',
          radius: 2,
          fillColor: 'black'
        },
        showInLegend: false,
        enableMouseTracking: false
      }]
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

工作示例: http://jsfiddle.net/ewolden/L05xzzka/4/