highCharts.js条形图中值的位置

Question

我正在尝试使图片中的条形图如下：这是我得到的结果也许有人可以建议，我如何对Xaxis承担价值？我要绘制的系列是：

series: [{
           name: 'text',
           data: [{"color":"#17a78b","y":3.36},
             {"color":"#17a78b","y":2.1},{"color":"#17a78b","y":1.67}, 
             {"color":"#17a78b","y":2.07},{"color":"#17a78b","y":-3.89},
             {"color":"#17a78b","y":2.73},{"color":"#17a78b","y":2.34},
             {"color":"#17a78b","y":2.91},{"color":"#56e8cb","y":4.94},
             {"color":"#56e8cb","y":2.99},{"color":"#56e8cb","y":-2.5},
             {"color":"#56e8cb","y":3.77}]
                                }]

，或者也许有某种方式来样式负面值和正值

Answer 1

您可以使用Highcharts.SVGElement.translate方法进行。每个数据标签都是SVG元素，您可以翻译取决于您的需求。该解决方案更灵活，因为您可以通过分析点和标签高度来添加更多自定义逻辑。检查演示和代码我在下面发布了您。

代码：

  chart: {
    type: 'column',
    events: {
        render: function() {
        var chart = this,
            series = chart.series[0],
            offset = 3,
            pointHeight,
            textHeight,
            translateY;
        series.points.forEach(function(point) {
            textHeight = point.dataLabel.getBBox().height;
          pointHeight = point.shapeArgs.height;
          if (pointHeight < textHeight) {
            translateY = (pointHeight - textHeight / 2) + textHeight + offset;
          } else {
            translateY = (pointHeight - textHeight / 2) - offset;
          }
          translateY = (point.y < 0) ? -translateY : translateY;
          point.dataLabel.translate(0, translateY);
        });
      }
    }
  }

演示：
https://jsfiddle.net/30bxv9rc/

API参考：
https://api.highcharts.com/class-reference/highcharts.svgelement#translate
https://api.highcharts.com/highcharts/chart.events.render

Answer 2

首先将plotOptions.column.stacking设置为normal，以便在列内显示数据标签。

接下来，您需要通过渲染图表后通过另一个函数来更新series中的数据点。指我的示例，数据点是循环的；它的价值被访问以检查正或负数；随后更新了verticalAlign和y属性，以便根据您的要求显示标签。