【问题标题】:Position single data label of highcharts pie chart centered below the chart将highcharts饼图的单个数据标签定位在图表下方居中
【发布时间】:2016-01-09 23:07:38
【问题描述】:

我正在使用 Highcharts 并初始化了一个饼图,但其中有 4 个饼图,并排成一排。每个饼图有 2 个切片,第二个切片始终透明且没有数据标签,因此每个图表只有 1 个数据标签来显示值。

我唯一想要的是将数据标签置于饼图下方的中心。

问题在于,数据标签移动的可见切片的大小取决于它,因为它有点绑定到它?

显示问题和当前状态的图像:

我尝试使用 x 和距离来定位标签:

plotOptions: {
        pie: {
            dataLabels: {
                distance: 0,
                x: -100

这实际上是有效的;我必须为每个图表及其数据标签固定位置。 但由于图表数据可以通过单击更改,填充的切片会发生变化,因此数据标签会重新定位。所以我有点需要一种方法来固定它们相对于图表中心的位置或类似的东西。

【问题讨论】:

  • 使用renderer 并将标签放在正确的位置可能更好?
  • 谢谢,解决了!

标签: highcharts pie-chart labels


【解决方案1】:

感谢 Sebastian Bochan 的评论。我最终使用了渲染器:

this.renderer.label(
 this.series[0].data[0].name + '<br>'
 + Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
 80, 320,'callout')}).add();

只是一个例子。这里的 80 和 320 设置了标签在绘图区域中的位置。 Renderer

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-06
    • 1970-01-01
    • 2012-04-25
    • 1970-01-01
    • 1970-01-01
    • 2016-11-29
    相关资源
    最近更新 更多