渐变效果与渐变填充Highchart规格

Question

我计划为我的网络应用程序创建一个仪表板，我有一些数据可以用图形表示，以便显示计划使用Activity Gauge（YYYY‐MM‐DDTHH:mm:ss.sssZ）和其他图表。 但是根据我们的要求，我们需要创建具有渐变效果的这些图形，并使用两种或两种以上的颜色逐渐填充效果，请参阅附加的仪表板样机以更好地理解我们的想法。我已尽最大努力使用Highchart线性渐变和径向渐变，但逻辑上似乎不可能。

我已经做了一些改变，我可以设计像 - http://www.highcharts.com/demo/gauge-activity但我逐渐失去了对它的影响。

这是我的原始图表 - http://jsfiddle.net/td2v4u4z/29/

我想这样做 -

此外，是否可以根据下图将标签放在圆圈内 -

我的示例图是 - http://jsfiddle.net/td2v4u4z/26/

请告诉我们如何使用Highchart实现这些设计。

提前致谢！

Answer 1

我不确定你是什么意思逐渐填充效果＆＃39;但我认为你可能想知道你的图表上有一个初始动画。

您可以更改负责渐变的功能，以使用初始动画实现图表。我发给你这张图表：

http://jsfiddle.net/td2v4u4z/31/

如果您认为使用简单的向计量器添加类似渐变的功能是个好主意，我认为您可以在Highcharts uservoice上请求此功能。最佳创意（获得最多票数）将在未来的Highcharts版本中实现。

https://highcharts.uservoice.com/

如果您提出第二个问题，我认为您应该能够添加自定义功能来旋转您的dataLabels，因此它们将位于您的圆环图中：

rotate = function() {
  $.each(options.series, function(i, p) {
    angle1 = 0;
    angle2 = 0;
    angle3 = 0;
    allY = 0;
    $.each(p.data, function(i, p) {
      allY += p.y;
    });
    $.each(p.data, function(i, p) {
      p.dataLabels = p.dataLabels || {};
      angle2 = angle1 + p.y * 360 / (allY);
      angle3 = angle2 - p.y * 360 / (2 * allY);
      if (angle3 >= 180) {
        p.dataLabels.rotation = 0 + angle3;
      } else {
        p.dataLabels.rotation = 0 + angle3;
      }
      angle1 = angle2;
    });
  });
};

我已经举例说明了它是如何工作的：http://jsfiddle.net/j7as86gh/31/