Question

我已经重新创建了以下方面展示的示例页面：

http://www.primefaces.org/showcase/ui/chart/pie.xhtml

饼图成功显示，我可以调整饼图模型以获取可用的setter和getter，但将鼠标悬停在一块饼上根本不会显示任何工具提示。

这不是浏览器问题，因为在同一浏览器中，工具提示会在演示站点上显示。

jqplot-highlighter-tooltip div显示在html源代码中，但是在悬停时没有更新。 javascript控制台中没有显示错误。

我正在使用5.2 maven依赖，并且还试过4.0 - 但没有改变。

会感激任何想法。

感谢。

托管bean的代码如下：

package org.primefaces.examples;

import org.primefaces.model.chart.PieChartModel;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import java.io.Serializable;

@ManagedBean
public class ChartView implements Serializable {

    private static final long serialVersionUID = 1075867144472594293L;

    private PieChartModel pieModel1;
    private PieChartModel pieModel2;

    @PostConstruct
    public void init() {
        createPieModels();
    }

    public PieChartModel getPieModel1() {
        return pieModel1;
    }

    public PieChartModel getPieModel2() {
        return pieModel2;
    }

    private void createPieModels() {
        createPieModel1();
        createPieModel2();
    }

    private void createPieModel1() {
        pieModel1 = new PieChartModel();

        pieModel1.set("Brand 1", 540);
        pieModel1.set("Brand 2", 325);
        pieModel1.set("Brand 3", 702);
        pieModel1.set("Brand 4", 421);

        pieModel1.setTitle("Simple Pie");
        pieModel1.setLegendPosition("w");
    }

    private void createPieModel2() {
        pieModel2 = new PieChartModel();

        pieModel2.set("Brand 1", 540);
        pieModel2.set("Brand 2", 325);
        pieModel2.set("Brand 3", 702);
        pieModel2.set("Brand 4", 421);

        pieModel2.setTitle("Custom Pie");
        pieModel2.setLegendPosition("e");
        pieModel2.setFill(false);
        pieModel2.setShowDataLabels(true);
        pieModel2.setDiameter(150);
    }

}

视图页面的代码是：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

<h:head/>

<h:body>
    <p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px" />

    <p:chart type="pie" model="#{chartView.pieModel2}" style="width:400px;height:300px" />
</h:body>

</html>

Answer 1

我遇到了同样的问题。使用扩展器修复它：

Facelet：

<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
        <div class="m-stage-slide swiper-slide">

            <a href="#">
                <img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
						</a>
            <div class="m-stage-slide-content">

                <div class="m-stage-slide-text">
                    <h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
                    <span class="m-stage-slide-tagline">{{sContent.text}}</span>
                </div>
                <span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
            </div>

        </div>
				<div class="m-stage-slide swiper-slide">

            <a href="#">
                <img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
						</a>
            <div class="m-stage-slide-content">

                <div class="m-stage-slide-text">
                    <h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
                    <span class="m-stage-slide-tagline">{{sContent.text}}</span>
                </div>
                <span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
            </div>

        </div>
				<div class="m-stage-button-prev"></div>
				<div class="m-stage-button-next"></div>
  	</div>

Managed Bean：

<script type="text/javascript">
    function pieExtender() {
        this.cfg.highlighter = {
            show: true,
            tooltipLocation: 'n',
            useAxesFormatters: false,
            formatString: '%s = %d'
        };
    }
</script>

有关更多调整，请参阅：http://www.jqplot.com/docs/files/plugins/jqplot-highlighter-js.html

PrimeFaces饼图：工具提示未在我的本地环境中显示

1 个答案: