PrimeFaces Piechart：工具提示不显示在我的本地环境中 [英] PrimeFaces Piechart: Tooltips are not displaying in my local environment

问题描述

我已经在以下位置重新创建了示例页面：

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

饼图成功显示，我可以调整可用的设置和获取器的饼图模型，但悬停在一个饼图上不会显示任何工具提示。

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

jqplot-highlighter-tooltip div显示在html源中，但它不会在悬停时更新。

我使用的是5.2 maven依赖，也尝试过4.0 - 但是没有改变。

$ b

感谢任何想法。

managed 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 =piemodel =＃{chartView.pieModel1}style =width：400px; height：300px/> 
 
< p：chart type =piemodel =＃{chartView.pieModel2}style =width：400px; height：300px/> 
< / h：body> 
 
< / html> 
  

解决方案

使用扩展器固定它：

 > < script type =text / javascript> 
 function pieExtender（）{
 this.cfg.highlighter = {
 show：true，
 tooltipLocation：'n'，
 useAxesFormatters：false，
 formatString：'％s =％d'
}; 
} 
< / script> 
  

托管Bean：

  pieModel.setExtender（pieExtender）; 
  

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

I have recreated the example page shown in the primefaces showcase at:

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

The pie chart successfully display and I am able to tweak the pie chart model for available setters and getters, but hovering over a piece of the pie does not display any tooltip at all.

This is not a browser issue, as in the same browser the tooltips display on the demo site.

The jqplot-highlighter-tooltip div is showing in the html source, but it is not getting updated on hover. There are no errors shown in the javascript console.

I am using the 5.2 maven dependancy, and have also tried 4.0 - but with no change.

Would appreciate any ideas.

Thanks.

The code for the managed bean is as follows:

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

}

The code for the view page is:

<!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>

解决方案

I have faced the same problem. Using an extender fixed it :

• Facelet :

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

• Managed Bean :

  pieModel.setExtender("pieExtender");
  

For more tweaking see : http://www.jqplot.com/docs/files/plugins/jqplot-highlighter-js.html

这篇关于PrimeFaces Piechart：工具提示不显示在我的本地环境中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！