渐变填充高分计的渐变效果 [英] Gradient effect with graddually fill in Highchart gauge

查看:359
本文介绍了渐变填充高分计的渐变效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



我已经做了一些更改,并且可以制作设计像 - http://jsfiddle.net/td2v4u4z/29/ 但我逐渐失去了对此的影响。



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



我想让它完全像这样 -

另外,是否可以将标签放置在圆圈内,如下图所示 -





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



请让我们知道我们如何使用海图实现这些设计。

在此先感谢!

解决方案

我不确定'逐渐填充效果' ,但我认为你可能会想知道你的图表上最初的动画。

您可以更改负责使渐变稍微变成一个初始动画的图表。我向您发送下面这张图表:



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 + = py;
});
$ .each(p.data,function i,p){
p.dataLabels = p.dataLabels || {};
angle2 = angle1 + py * 360 /(allY);
angle3 = angle2 - py * 360 /( 2 * allY);
if(angle3> = 180){
p.dataLabels.rotation = 0 + angle3;
} else {
p.dataLabels.rotation = 0 + angl E3;
}
angle1 = angle2;
});
});
};

我已经做了一个简单的例子,它是如何工作的: http://jsfiddle.net/j7as86gh/31/

I'm planning to create a dashboard for my web application, I have some data to represent graphically so to show that planning to use you Activity Gauge (http://www.highcharts.com/demo/gauge-activity) and other charts. But as per our requirement we need to create these graphs with gradient effect with gradually fill effect with two or more than two colors, see the attached dashboard mockup for better understanding our thought. I have done our best effort to make with Highchart Linear gradients and Radial gradients but logically it seems not possible.

I have done some changes as per and I am able to make design like - http://jsfiddle.net/td2v4u4z/29/ but I lost gradually effect on this.

here is my original graph - http://jsfiddle.net/td2v4u4z/26/

I want to make this exactly like this -

Also, is this possible to place label inside the circle as per the below image -

My sample graph is - http://jsfiddle.net/qambxkmo/13/

Please let us know how can we achieve these design with Highchart.

Thanks in advance!

解决方案

I am not sure what do you mean by 'gradually fill effect', but I think that you may wonder about an initial animation on your chart.

You can change the function responsible for making your gradient a little bit to achieve the chart with an initial animation. I am sending you this chart below:

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

If you think that is a good idea to have a functionality of simple adding similar gradient to your gauge, I think that you can ask for this feature on Highcharts uservoice. The best ideas (with biggest number of votes) gets to be implemented in future Highcharts versions.

https://highcharts.uservoice.com/

In case of the second question you have asked, I think that you should be able to add custom function for rotating your dataLabels, so they will be inside your donut chart:

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;
    });
  });
};

I have made simple example how it can work: http://jsfiddle.net/j7as86gh/31/

这篇关于渐变填充高分计的渐变效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆