Изменение и сохранение градиентов CSS в приложении JSF

Question

Я сделал следующую диаграмму с определенным стилем, чтобы указать уровень различных уровней потребления памяти.Я делаю это, назначая градиент для background класса следующим образом:

background: linear-gradient(to bottom, rgba(247,49,0,0.2) 0%,rgba(247,49,0,0.2) 19%,rgba(242,242,0,0.2) 20%,rgba(242,242,0,0.2) 39%,rgba(97,196,25,0.2) 40%,rgba(97,196,25,0.2) 100%); 

Но теперь проблема заключается в том, что уровни градиента должны быть изменены с помощьюПользователь.У меня есть приложение JSF и, конечно, разрешено использовать jquery и JS.

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

Возможно ли это вообще?Есть идеи?Пожалуйста, дайте мне знать, если мне нужно поделиться дополнительной информацией.

Answer 1

    <style type="text/css">
        .jqplot-series-canvas{
            background: -moz-linear-gradient(top, rgba(247,49,0,0.2) 0%, rgba(247,49,0,0.2) #{chartCustomizeBean.yellowRedLimit -1}%, rgba(242,242,0,0.2) #{chartCustomizeBean.yellowRedLimit}%, rgba(242,242,0,0.2) #{chartCustomizeBean.yellowGreenLimit -1}%, rgba(97,196,25,0.2) #{chartCustomizeBean.yellowGreenLimit}%, rgba(97,196,25,0.2) 100%);
            background: -webkit-linear-gradient(top, rgba(247,49,0,0.2) 0%,rgba(247,49,0,0.2) #{chartCustomizeBean.yellowRedLimit -1}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowRedLimit}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowGreenLimit -1}%,rgba(97,196,25,0.2) #{chartCustomizeBean.yellowGreenLimit}%,rgba(97,196,25,0.2) 100%);
            background: linear-gradient(to bottom, rgba(247,49,0,0.2) 0%,rgba(247,49,0,0.2) #{chartCustomizeBean.yellowRedLimit -1}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowRedLimit}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowGreenLimit -1}%,rgba(97,196,25,0.2) #{chartCustomizeBean.yellowGreenLimit}%,rgba(97,196,25,0.2) 100%);
        }
    </style>

Благодаря указателю из @Kukeltje я смог установить динамический градиент, включив класс в заголовок страницы xhtml.Из формы пользовательского интерфейса значения могут быть изменены, а затем при отправке я обновляю страницу, и новые значения обновляются.Сохраненная кнопка была разработана таким образом, чтобы перезагрузить страницу при отправке, которая также обновляет значения градиента.

<h:commandButton type="submit"
     styleClass="data-customize" id="data-customize" 
     actionListener="#{chartCustomizeBean.save}"                                                             
     onclick="location.reload(true);"                                                             
     value="Save">