Highcharts 自定义动画支持答案

【问题标题】：Highcharts custom animation supportHighcharts 自定义动画支持
【发布时间】：2014-07-26 01:52:01
【问题描述】：

当系列数据更新或仅基于其他自定义应用程序事件时，是否有任何方法可以在 HighCharts 中的条上触发自定义渐变或颜色动画？

例如，当数据到达我们的应用程序时，HighCharts 可以很好地将条形图动画化到一个新点。但是，对我们数据的更改将相当小，因此看到条形实际更改对我们的用户来说将是一个挑战。但是，我们希望直观地表明发生了变化。也许是轻微的闪光。也许我们渐变过渡。目前还不确定，但我们会受到 HighChart 功能的限制。

除了根据http://api.highcharts.com/highstock#chart.animation 的动画持续时间和缓动之外，开发人员是否可以控制这些条的动画？

【问题讨论】：

标签： animation highcharts

【解决方案1】：

实际上，我刚刚完成了一个脚本来执行此操作。诀窍是使用 setInterval() 触发一个函数，该函数在每个点将亮度（例如）增加几个点。然后达到一个高点，又回到原来的颜色。

我用这个函数来改变亮度：

function ColorLuminance(hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    lum = lum || 0;

    // convert to decimal and change luminosity
    var rgb = "#",
      c, i;
    for (i = 0; i < 3; i++) {
      c = parseInt(hex.substr(i * 2, 2), 16);
      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
      rgb += ("00" + c).substr(c.length);
    }
    return rgb;
  }

然后你的任务就是编写一个脚本，比如用 jQuery，就像这样：

$.each(chart.series, function(j, series) {
  for (var i = 0.000; i < 1; i += 0.01) {
    setTimeout(function() {
      series.update({
        color: ColorLuminance(curr_color, i)
      });
    }, 100);
  }
});

该功能还没有完全做到，但我即将完成它，所以一旦我解决它就会编辑。

【讨论】：