javascript - 获取highcharts柱形图中每个条形的终点

Question

我正在尝试创建一个条形图，每个条形末端的箭头指向下一个条形。为此，我需要知道每个柱的终点坐标。请引用下图，以更清楚地了解我要实现的目标。

我现在的方法是在图表对象中获取每个 series[0].points[i] 中的 clientX，并将其与 plotWidth 添加到我需要渲染箭头图像的位置。现在这似乎不起作用，因为箭头呈现不正确。我现在的方法在这里很麻烦。我试图在每个小节的末尾获得“X”，现在它出现在中间的某个地方。

这是问题的 jsfiddle - http://jsfiddle.net/qp90yx34/1/

这是我现在所在位置的代码 -

$(function () {
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        load: function () {
          _.each(this.series[0].points, (point, key) => {
            if (!_.isUndefined(this.series[0].points[key + 1])) {
              this.renderer.text("X",
              point.clientX + point.pointWidth, //x
              point.plotY) // y
              .add();
            }
          })  
        },
      }
    },
    title: {
      text: '',
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: false,
          format: '<b>{point.name}</b> ({point.y:,.0f})',
        },
      }
    },
    legend: {
      enabled: false
    },
    xAxis: {
      categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5']
    },
    series: [{
      type: 'column',
      name: 'Marks',
      data: [83, 72, 71, 63, 74]
    }]
  });
});

Answer 1

我认为您应该能够在 renderer.text 方法中更改文本的 x 位置:

      this.renderer.text("X",
          point.clientX + point.pointWidth / 2 + chart.plotLeft, //x
          point.plotY) // y
        .add();

在这个方法中，我添加了 chart.plotLeft，它是图表左边缘和 plotArea 之间的距离。

我还将 point.pointWidth 更改为 point.pointWidth/2 因为 point.clientX 是列中心的像素位置。

实例: http://jsfiddle.net/qp90yx34/2/