代码之家  ›  专栏  ›  技术社区  ›  Mahmoud Saleh

如何更改primefaces chartjs中的轴字体

  •  0
  • Mahmoud Saleh  · 技术社区  · 7 年前

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

    enter image description here

    代码:

    <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");
            ChartData data = new ChartData();
    
            BarChartDataSet barDataSet = new BarChartDataSet();
            barDataSet.setLabel("");
    
            List<Number> valuesList = new ArrayList<>();
            List<String> labelsList = new ArrayList<>();
            List<String> backgroundColorList = new ArrayList<>();
    
            for (Map.Entry<String, Double> entry : delegatesMap.entrySet()) {
                labelsList.add(entry.getKey());
                valuesList.add(entry.getValue());
                backgroundColorList.add("#00bcd4");
            }
    
            barDataSet.setData(valuesList);
            barDataSet.setBackgroundColor(backgroundColorList);
    
    
    
            data.addChartDataSet(barDataSet);
            data.setLabels(labelsList);
            barModel.setData(data);
    
            // Options
            BarChartOptions options = new BarChartOptions();
            CartesianScales cScales = new CartesianScales();
            CartesianLinearAxes linearAxes = new CartesianLinearAxes();
            CartesianLinearTicks ticks = new CartesianLinearTicks();
            ticks.setBeginAtZero(true);
            linearAxes.setTicks(ticks);
            cScales.addYAxesData(linearAxes);
            options.setScales(cScales);
    
            Title title = new Title();
            title.setDisplay(true);
            title.setText("Sales Income");
            title.setFontFamily("Tahoma");
            options.setTitle(title);
    
            Legend legend = new Legend();
            legend.setDisplay(false);
            options.setLegend(legend);
    
            barModel.setOptions(options);
    
        }
    

    我正在尝试使用extender函数更改axis字体系列,如下所示:

    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);
        }
    

    但它不起作用。我怎样才能修好它?

    0 回复  |  直到 6 年前
        1
  •  2
  •   Mahmoud Saleh    7 年前

    它通过如下更改我的扩展器功能工作:

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

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

    推荐文章