小条形图的弹出数据标签

Question

我正在尝试重新创建这个设计

我已经做到了我几乎满意的程度。但问题在于，当值小到不可见（数据标签不可见）时，在设计中他们已经解决了这个问题。

我查看了 API 文档，但无法找到解决方案是否可行。唯一想到的就是在系列上设置“y”，如果它很小，它就会上升，但逻辑会很挑剔，因为我不知道它是否会显示或裁剪。

 { name: 'Summa', data: [0.5, 60, 40], color: 'transparent', stack: 0, borderColor: '#303030', dataLabels:{ format:'{y} %', y:-20, backgroundColor: 'white' } }

这是我当前的解决方案：https://jsfiddle.net/BrankoSabo/n1Lcpgmr/120/

Answer 1

您可以为单个数据点数据标签设置位置：

  series: [..., {
    data: [{
      y: 0.5,
      dataLabels: {
        y: -15
      }
    }, 15, 20],
    ...
  }]

---

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

API 参考： https://api.highcharts.com/highcharts/series.bar.data.dataLabels

---

如果您需要更通用和动态的解决方案，您可以找到高度小于相关数据标签宽度的点并修改数据标签的位置。例如：

  chart: {
    type: 'bar',
    events: {
      load: function() {
        this.series.forEach(s => {
          if (s.name !== 'Summa') {
            s.points.forEach(point => {
              if (point.y > 0 && point.dataLabel.width > point.shapeArgs.height) {
                point.dataLabel.attr({
                  y: point.dataLabel.y - 20
                });
              }
            });
          }
        });
      }
    }
  }

---

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

API 参考： https://api.highcharts.com/highcharts/chart.events