Поддержка пользовательских анимаций Highcharts

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

Эта функция не делает довольно, но я собираюсь закончить его так будет редактировать, как только я его решить.