Question

我正在尝试使条形图看起来像图片here： Here是我得到的结果也许有人可以建议，我如何坚持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

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

接下来，在绘制图表之后，您将需要通过另一个函数更新series中的每个数据点。参考我的example，数据点被循环；访问其值以检查正数或负数；随后verticalAlign和y属性会更新，以便根据您的要求显示标签。

Answer 2

您可以使用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

值在Highcharts.js条形图中的位置

2 个答案: