Highcharts linear Градиентное заполнение с фиксированной верхней границей

Question

Я ищу для достижения эффекта, аналогичного эффекту в this example.

Однако в приведенном выше примере используется градиент, который относительно видимого участка. Таким образом, стоп-сигнал 0 используется на пике видимого графика (независимо от фактического значения пика), а в основании используется стоп-сигнал 1.

Скажем, у меня есть данные, которые могут находиться в диапазоне от 0 до 100 (например, в процентах). Я хочу иметь возможность указать, что «темный» всегда используется для значения 100, тогда как «свет» всегда используется для значения 0.

Итак, если мои видимые данные варьируются от 0 до 20, то все это заполняется цветом светлого градиента (на нижнем конце спектра градиента) ... Я не хочу, чтобы он был заполнен от света до полностью темного.

Любой способ достичь этого?

Answer 1

Для достижения такого градиента вам нужно сделать несколько вещей.

1. Градиентные блоки должны быть переключены на userSpaceOnUse.
2. x1, y1, x2, y2 должны указывать на точки, где начинается и заканчивается участок графика.

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

function() { 
    this.series[0].update({ 
    fillColor: { 
     linearGradient: [0, 0, 0, this.plotHeight] 
    } 
    }); 
} 

пример: http://jsfiddle.net/qhuee8uf/1/

Теперь градиент имеет фиксированный X/Y атрибуты, что означает, что градиент не будет реагировать. Чтобы иметь градиент, который будет работать с диаграммой изменения размера, вы должны пересчитать градиент при событии перерисовывания.

Кроме того, я обнаружил, что обновление градиента в серии не обновляет градиент, но создает новый, что может быть не лучшим поведением.

Вместо этого, вы можете изменить градиент атрибутов непосредственно

function adjustGradient() { 
    document.getElementsByTagName('linearGradient')[0].setAttributeNS(null, 'y2', this.plotHeight); 
} 

chart: { 
    events: { 
    load: adjustGradient, 
    redraw: adjustGradient 
    } 
}, 

пример: http://jsfiddle.net/qhuee8uf/