Question

我愿意实现以下目标：

我的highcharts图表有这个系列，每个点都附有数据标签，如下例所示： http://jsfiddle.net/sbochan/p6Ufv/

数据标签应该是红色圆圈（正圆），因此我们使用以下定义：

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维度。这个事实导致数据标签在我的设计中变得不一致。出于某种原因，在系列数据标签的情况下，我找不到强制使用circle代替rect的方法，或者强制它根据我的尺寸规范渲染这些SVG。< / p>

这甚至可能吗？有办法解决它吗？提前谢谢。

Answer 1

我找到了解决问题的创意解决方案。我创建了一个圆形图像（也可以使用SVG），并将其用作系列中的标记。这使我的系列（也是一个散射系列）由许多圆圈组成。然后，我使用了一些数据标签属性，如padding和style，使它们看起来像我想要的那样。最后一件事我使用formatter来设置正确的数据。

Answer 2

这是受到@MorKadosh 建议的启发。

import HighCharts from 'highcharts';

HighCharts.SVGRenderer.prototype.symbols.roundCircle = function (x, y, w, h) {
  let width = w,
    height = h,
    newX = x;
  if (height > width) {
    width = height;
    newX -= (width - w) / 2;
  } else if (width > height) {
    height = width;
  }
  return HighCharts.SVGRenderer.prototype.symbols.circle(newX, y, width, height);
};

{
  …,
  series: [{
    …,
    dataLabels: {
      …,
      shape: 'roundCircle'
    }
  }],
  …
}

说明：

series.line.marker.symbol 文档引用更新 Highcharts.SVGRenderer.prototype.symbols 对象，使用 link to a jsfiddle demo。

原来的圆函数如下。

f (a,b,k,t){return this.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 行通过使较小的值等于较大的值来使宽度和高度相同。如果宽度改变，那么圆将被推到右边，使我们的值偏离中心，被推到左边。我们通过计算宽度移动了多少来进行调整，将其除以二，然后偏移 x。最后的语句简单地使用我们新计算的值调用原始圆函数。

最后，在我们的图表中，我们将 series.dataLabels.shape 值定义为“roundCircle”。

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

2 个答案: