在 highcharts-point 内的 Highchart 甘特图中，我如何创建自定义形状

Question

我想创建两个节点以及块内的顶部边框，是否可以使用 highchart

Answer 1

您可以使用 Highcharts.SVGRenderer class 添加自定义形状。请记住，下面的示例只是草稿，您可能需要在图表重绘时重新定位元素。

events: {
  load: function() {
    const point = this.series[0].points[0],
      x1 = this.plotLeft + point.plotX,
      x2 = this.plotLeft + point.plotX + point.shapeArgs.width,
      y = this.plotTop + point.shapeArgs.y;

    this.renderer.label(
      'n1',
      x1,
      y,
    ).attr({
      fill: 'yellow',
      width: point.pointWidth,
      height: point.pointWidth,
      padding: 0,
      zIndex: 3,
      'text-align': 'center',
      'vertical-align': 'middle'
    }).add();

    this.renderer.label(
      'n2',
      x2 - point.pointWidth,
      y,
    ).attr({
      fill: 'yellow',
      width: point.pointWidth,
      height: point.pointWidth,
      padding: 0,
      zIndex: 3,
      'text-align': 'center',
      'vertical-align': 'middle'
    }).add();

    this.renderer.path(['M', x1, y, 'L', x2, y]).attr({
      'stroke': 'red',
      'stroke-width': 2,
                zIndex: 3
    }).add();
  }
}

现场演示： https://jsfiddle.net/BlackLabel/g1erkcj9/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

在 highcharts-point 内的 Highchart 甘特图中，我如何创建自定义形状

In Highchart gantt Chart inside highcharts-point how can i create custom shapes

highcharts