如何在 PrimeFaces 和 Chart.js 中更改轴字体

Question

我正在使用 PrimeFaces 7，我正在尝试使用 Chart.js 中的条形图，如下所示：

代码：

<p:barChart  widgetVar="cfg" model="#{dashboardBean.barModel}" style="width:500px;height:348px;"/>

然后我按如下方式创建我的模型：

private void createBarModel(Map<String, Double> delegatesMap) {
    barModel = new BarChartModel();
    barModel.setExtender("skinBar");
    // ...
}

我正在尝试使用扩展函数更改轴字体系列，如下所示：

function skinBar() {
        var options = $.extend(true, {}, this.cfg.config);

    options = {
            scales: {
                yAxes: [{
                    ticks: {
                        fontFamily: 'Tahoma',
                        fontSize:40
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontFamily: 'Tahoma',
                        fontSize:40
                    }
                }]
            }
        }

       
       $.extend(true, this.cfg.config, options);
    }

但它不起作用。我该如何解决？

Answer 1

它通过如下更改我的扩展器函数来工作。

型号：

barModel = new BarChartModel();
barModel.setExtender("skinBar");

扩展函数：

function skinBar() {
    Chart.defaults.global.defaultFontFamily = 'Tahoma';
}

参考：https://www.chartjs.org/docs/latest/general/fonts.html

Answer 2

如果您不能或不想使用扩展程序功能，您可以将其添加到模板底部（</body> 之前）：

<script>if(typeof Chart!=='undefined'){Chart.defaults.font.family='...'}</script>

如果在呈现页面时有任何图表可见，它将适用。所以并不完美，我建议尽可能使用扩展器。

如何在 PrimeFaces 和 Chart.js 中更改轴字体

How to change axis font in PrimeFaces and Chart.js

canvas

primefaces

jsf-2

chart.js