Javascript 修复了Highcharts系列Datalabel中的Datalabel维度

我愿意实现以下目标：

My highcharts有一个系列，每个点都有数据标签，如以下示例所示：

数据标签应为红色圆圈（完美圆圈），因此Iv'e对其使用了以下定义：

series{
//......////
dataLabels:{
        enabled : true,
        backgroundColor: 'rgb(229, 32, 32)',
        borderRadius:24,
        borderWidth:2,
        borderColor: '#890000',
        color:'#FFF',
        shadow:true,
        defer:false,
        padding: 3,
 }

当点数据是2位数字时，下面给出了一个漂亮的带有笔划的红色圆圈。 问题出现在数字有1位或多于2位的情况下。 出于某种原因，highcharts从datalabel内容派生Rect SVG维度。这一事实导致数据标签在我的设计中变得不一致。 出于某种原因，我无法找到一种方法来强制highcharts在使用series DataLabel时使用

circle

而不是

rect

，或者，强制它根据我的维度规范呈现这些SVG rect

这可能吗？有办法解决这个问题吗？

---

提前谢谢。

我找到了解决问题的创造性方法。 Iv'e创建了一个圆形图像（也可以使用SVG），并将其用作系列中的标记。这使得我的系列（也是一个分散系列）由许多圆圈组成。 然后，我使用了一些datalabel属性，如

填充

和

样式

，使它们看起来像我想要的那样。最后一件事是我使用了

格式化程序来设置正确的数据。
这是受@建议的启发

从“HighCharts”导入HighCharts；
HighCharts.SvgRender.prototype.symbols.roundCircle=函数（x、y、w、h）{
设宽度=w，
高度=h，
newX=x；
如果（高度>宽度）{
宽度=高度；
newX-=（宽度-w）/2；
}否则，如果（宽度>高度）{
高度=宽度；
}
返回HighCharts.SvgRender.prototype.symbols.circle（newX，y，width，height）；
};
{
…,
系列：[{
…,
数据标签：{
…,
形状：“圆形”
}
}],
…
}

说明：

该文档参考了更新Highcharts.SvgRender.prototype.symbols对象，其中包含一个

原始圆函数如下所示

f（a，b，k，t）{返回这个.arc（a+k/2，b+t/2，k/2，t/2，{start:.5*Math.PI，end:2.5*Math.PI，open:！1}）

在我上面的示例中，我们只需创建一个名为roundCircle的新函数（一个令人遗憾的冗余名称）使用一个新函数。第7-12行通过使较小的值等于较大的值来使宽度和高度相同。如果宽度发生变化，则圆将被推到右侧，使我们的值偏离中心，推到左侧。我们通过计算宽度偏移量来进行调整，将其除以2，然后偏移x.最终语句仅使用我们新计算的值调用原始的圆函数

最后，在我们的图表中，我们将series.dataLabels.shape值定义为“roundCircle”.
一般来说，您需要有一个圆，因为当我添加4位数字或删除所有数字时，datalebsl是圆。正如我在代码中看到的，使用的是borderRadius，因此您需要调整datalbel的高度和border radius参数，使其不具有圆。您能在JSFIDLE中共享此信息吗？不幸的是，这是我工作中的项目Iv'e的一部分（我不允许分享）。但我认为我的回答非常直截了当，但欢迎你问我任何问题！：）