时间戳

首页 > 解决方案 > 为什么 Primefaces donutChart 不起作用？

charts - 为什么 Primefaces donutChart 不起作用？

问题描述

我尝试使用 primefaces 中的甜甜圈图，因为我使用了 primefaces，但该图表无法正常工作。

所以这是我的 XHTML

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                template="/WEB-INF/templates/new-dashbord-landing-page.xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:define name="postMetadata">
    </ui:define>

 <ui:define name="content">
    <div class="chart-donut">
        <p:donutChart model="#{bean.donutModel}"/>
     </div>
    </ui:define>
</ui:composition>

对于 p:donutChart 在我的情况下我不能使用它，我不知道为什么，这是我的 java

import org.apache.poi.ss.usermodel.charts.ChartData;
import org.primefaces.model.chart.DonutChartModel;

import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.List;

    public class Bean {
    
        private DonutChartModel donutModel;
    
        @PostConstruct
        public void init() {
            donutModel = new DonutChartModel();
            ChartData data = new ChartData();
    
            DonutChartDataSet dataSet = new DonutChartDataSet();
            List<Number> values = new ArrayList<>();
            values.add(300);
            values.add(50);
            values.add(100);
            dataSet.setData(values);
    
            List<String> bgColors = new ArrayList<>();
            bgColors.add("rgb(255, 99, 132)");
            bgColors.add("rgb(54, 162, 235)");
            bgColors.add("rgb(255, 205, 86)");
            dataSet.setBackgroundColor(bgColors);
    
            data.addChartDataSet(dataSet);
            List<String> labels = new ArrayList<>();
            labels.add("Red");
            labels.add("Blue");
            labels.add("Yellow");
            data.setLabels(labels);
    
            donutModel.setData(data);
        }
    
        public DonutChartModel getDonutModel() {
            return donutModel;
        }
    }

我使用与 primefaces 文档中相同的代码。我只想使用图表:(

标签： chartsprimefaceschart.js

解决方案

问题是 DonutChartModel 的导入。您正在选择用于 p:chart 组件的旧版本。对于基于 Charts.js 的组件，正确的包名称是： org.primefaces.model.charts.donut.DonutChartModel

稍微偏离主题，bean 也需要注释。例如@Named和@RequestScoped。

推荐阅读