Таблица диаграмм высокого ранга с градиентом, который следует за строкой

Question

Ниже приведена диаграмма Area Range с градиентом.

http://jsfiddle.net/gXpHH/1/

То, что я хочу сделать, это есть градиент следовать кривой, так что цвет в любой точке вдоль нижней линии то же самое, и заканчивается в тот же цвет, когда он достигает верхней строки , Я почти уверен, что в настоящее время это не вариант в highcharts, но я просто хотел посмотреть, не сталкивался ли кто-нибудь с этим раньше. Вот код, который в настоящее время формирует градиент:

series: [{ 
      name: "Shade", 
      fillColor: { 
       linearGradient: [0, 0, 0, 300], 
       stops: [ 
        [0, "#4572A7"], 
        [1, "rgba(2,0,0,0)"] 
       ] 
      }, 
      data: [ 
       [0, 14733, 18890], 
       [1, 16583, 21642], 
       //... rest here 
       [10, 42417, 61955] 
      ] 
    }] 

Благодарности

Примечание: это не то же самое, как Gradient Fill on Line Chart (Highcharts), так как мне нужно градиент следовать кривой

Answer 1

Трудность заключается в детализации: Highcharts рисует один единственный путь SVG для точек серии и связывает этот путь с градиентом. Если ваши данные о серии являются относительно линейными, может оказаться полезным следующее приближение. Смотрите jsfiddle that I've created:

Если предположить, что ваши данные серии не статичны, мой пример включает в себя две серии и функцию, что для каждой серии, пытаюсь динамически создавать LinearGradient, что ближе всего к вашему требованию:

function getLinearGradient(series) { 
    var lastY0=null, lastY1=null, maxY0=null, maxY1=null; 
    $.each(series.data, function(key,value) { 
     maxY0 = Math.max(value[1],maxY0); 
     maxY1 = Math.max(value[2],maxY1); 
     lastY0 = value[1]; 
     lastY1 = value[2]; 
    }); 
    var firstY0 = series.data[0][2], 
     firstY1 = series.data[0][2] 
    ; 
    var minY0=maxY0, minY1=maxY1; 
    $.each(series.data, function(key,value) { 
     minY0 = Math.min(value[1],minY0); 
     minY1 = Math.min(value[2],minY1); 
    }); 
    var minY = minY0, 
     maxY = maxY1, 
     heightY = maxY - minY 
    ;   
    var gradient = { 
      x1: 10 + (((firstY0-minY)/heightY) * 80) + "%", 
      y1: "10%", 
      x2: 10 + (((lastY1-minY)/heightY) * 80) + "%", 
      y2: "90%" 
    }; 
    return gradient; 
}; 

Конечно, этот подход не является полномасштабным решением и полезен только в том случае, если вы имеете дело с данными, которые приблизительно следуют линейной кривой. Вот jsfiddle

Answer 2

Я не есть какой-то пример, и я точно не знаю, уже ли это в спецификациях, но я уверен, что единственным способом добиться этого эффекта будет использование градиентов svg mash.

Вы можете использовать точки пути в качестве граничных точек для матрицы затора и получить необходимый эффект.

Для получения дополнительной информации см. here.