ChartistJSF 扩展

Question

所以，我正在使用 ChartistJSF（基于 Chartist），jsf 版本有点简单，所以我尝试使用 javascript 版本中提供的一些插件，但我正在尝试弄清楚如何做到这一点，因为 JSF 中的每个图表 "module" 都有一个扩展，我可以在其中放置一些额外的配置，但这个没有。你们能帮帮我吗？

Answer 1

因为 3.0, ChartistJSF supports plugins, here's an example of 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
    }
}

结果：

ChartistJSF 扩展

ChartistJSF Extend

jsf

chartist.js