Question

在系列数据更新时或者仅基于其他自定义应用程序事件时，有没有办法在HighCharts中的栏上触发自定义渐变或颜色动画？

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

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

Answer 1

我实际上刚刚编写了一个可以执行此操作的脚本。诀窍是使用setInterval（）触发一个函数，该函数在每个点上将lum（例如）增加几个点。然后达到高位并回到原来的颜色。

我使用此功能进行lum更改：

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

这个功能并没有完成，但我即将完成它，所以一旦我解决它就会编辑。

Highcharts自定义动画支持

1 个答案: