逐渐填充 Highchart 仪表的渐变效果答案

【问题标题】：Gradient effect with graddually fill in Highchart gauge逐渐填充 Highchart 仪表的渐变效果
【发布时间】：2016-10-25 09:29:04
【问题描述】：

我正计划为我的 Web 应用程序创建一个仪表板，我有一些数据要以图形方式表示，以便显示计划使用您的 Activity Gauge (http://www.highcharts.com/demo/gauge-activity) 和其他图表。但是根据我们的要求，我们需要创建这些具有渐变效果的图形，并使用两种或两种以上的颜色逐渐填充效果，请参阅随附的仪表板模型以更好地理解我们的想法。我已尽最大努力使用 Highchart 线性渐变和径向渐变，但从逻辑上讲这似乎是不可能的。

我已经按照要求做了一些更改，我能够做出类似 - http://jsfiddle.net/td2v4u4z/29/ 的设计，但我逐渐失去了效果。

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

我想让这个完全像这样 -

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

我的示例图是 - http://jsfiddle.net/qambxkmo/13/

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

提前致谢！

【问题讨论】：

标签： javascript jquery charts highcharts pie-chart

【解决方案1】：

我不确定“逐渐填充效果”是什么意思，但我认为您可能想知道图表上的初始动画。

您可以稍微更改负责制作渐变的函数，以实现带有初始动画的图表。我在下面向您发送此图表：

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

如果您认为在仪表中添加类似渐变的简单功能是个好主意，我认为您可以在 Highcharts uservoice 上请求此功能。最好的想法（投票数最多）将在未来的 Highcharts 版本中实施。

https://highcharts.uservoice.com/

如果你问的第二个问题，我认为你应该能够添加自定义函数来旋转你的数据标签，所以它们会在你的圆环图中：

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/

【讨论】：