首页 文章

在highcharts柱形图中获取每个柱的终点

提问于
浏览 次
2

我正在尝试创建一个带箭头的条形图，每个条形的末尾指向下一个条形图 . 为此，我需要知道每个柱的终点坐标 . 请参阅下面的图片，以便更清楚地了解我要实现的目标 .
This is what I am trying to achieve

我现在的方法是在图表对象中的每个系列[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]
    }]
  });
});
javascript jquery highcharts

1 回答

  • 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/

    回复于

相关问题