ChartistJSF Extend

Question

Donc, j'utilise ChartistJSF (basé sur Chartist), la version jsf est un peu simple, donc j'essaie d'utiliser des plugins proposés dans la version javascript, mais j'essaie de comprendre comment Pour ce faire, parce que chaque "module" graphique dans JSF a une extension où je peux mettre quelques configurations supplémentaires, mais celui-ci n'a pas. Pouvez-vous m'aider?

Answer 1

Depuis 3.0, ChartistJSF prend en charge les plugins, voici un exemple de chartist-plugin-threshold:

xhtml

<ct:chart id="lineChart" type="line" model="#{chartDataBean.pluginsModel}" 
      plugins="myPlugins" 
      styleClass="example-plugin-threshold"> 
</ct:chart> 

js

<script> 
    var myPlugins = 
     [ 
     Chartist.plugins.ctThreshold({ 
      threshold: 4 
     }) 
     ]; 
</script> 

css

.example-plugin-threshold .ct-line { 
    stroke-dasharray: 5px; 
    animation: dashoffset 1s linear infinite; 
} 

.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-above { 
    stroke: #f05b4f; 
} 

.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-below { 
    stroke: #59922b; 
} 

.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-above { 
    fill: #f05b4f; 
} 

.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-below { 
    fill: #59922b; 
} 

@-webkit-keyframes dashoffset { 
    0% { 
     stroke-dashoffset: 0 
    } 

    100% { 
     stroke-dashoffset: -20px 
    } 
} 

@-moz-keyframes dashoffset { 
    0% { 
     stroke-dashoffset: 0 
    } 

    100% { 
     stroke-dashoffset: -20px 
    } 
} 

@-ms-keyframes dashoffset { 
    0% { 
     stroke-dashoffset: 0 
    } 

    100% { 
     stroke-dashoffset: -20px 
    } 
} 

@keyframes dashoffset { 
    0% { 
     stroke-dashoffset: 0 
    } 

    100% { 
     stroke-dashoffset: -20px 
    } 
} 

Résultat: