Highcharts pie/variablepie 在 plotedge 上对齐多行标签

Question

我使用带有一些长标签和 multi-lines 标签的变量饼图（标签
值 1
值 2）。为了优化图表的呈现，我使用了 alignTo“plotEdges”选项，它运行良好，但它似乎无法在绘图边缘对齐标签的所有行。我的选择是：

dataLabels: {
        enabled: true,
        alignTo: "plotEdges",
        formatter: function () { return "<b>"+this.point.name+"</b><br><i>"+""+Highcharts.numberFormat(this.point.y, 0, ".", " ")+" </i> <i>("+Highcharts.numberFormat((this.y/11999*100), 2, ".", " ")+"%)</i><br><i>"+""+Highcharts.numberFormat(this.point.z, 0, ".", " ")+" </i>";}},
    innerSize: "20%",
}

你可以在这里看到结果：https://jsfiddle.net/vegaelce/95ochyqz/

我希望图表右侧的所有标签都右对齐（值在标签标题下右对齐）。图表左侧的标签在 plotEdge 附近正确左对齐。

可能吗？

谢谢

Answer 1

将 dataLabels.useHTML 设置为 true 以将它们呈现为优秀元素，

在 dataLabels.formatter 回调中检查标签对齐并根据左侧添加浮动样式：

formatter: function() {
if (this.point.labelPosition.alignment === 'left') {
  return "<b>" + this.point.name + "</b><br><i style='float: right'>" + "" + Highcharts.numberFormat(this.point.y, 0, ".", " ") + " </i> <i style='float: right'>(" + Highcharts.numberFormat((this.y / 11999 * 100), 2, ".", " ") + "%)</i><br><i style='float: right'>" + "" + Highcharts.numberFormat(this.point.z, 0, ".", " ") + " </i>";
} else {
  return "<b>" + this.point.name + "</b><br><i>" + "" + Highcharts.numberFormat(this.point.y, 0, ".", " ") + " </i> <i>(" + Highcharts.numberFormat((this.y / 11999 * 100), 2, ".", " ") + "%)</i><br><i>" + "" + Highcharts.numberFormat(this.point.z, 0, ".", " ") + " </i>";
}
}

随时改进代码。演示：https://jsfiddle.net/BlackLabel/2vt7394m/

API: https://api.highcharts.com/highcharts/series.line.dataLabels.useHTML

Highcharts pie/variablepie 在 plotedge 上对齐多行标签

Highcharts pie/variablepie align multilines label on plotedge

label

alignment

highcharts

pie-chart