【问题标题】:How to show absolute value in tooltip in a pe:gChart如何在 pe:gChart 的工具提示中显示绝对值
【发布时间】:2020-04-29 01:55:25
【问题描述】:

我正在使用谷歌图表在 primefaces 中显示饼图。PrimeFaces 版本是 6.1。目前工具提示有绝对值和百分比。我只想显示绝对值。 我的代码是

<div id="savChart">
  <pe:gChart value="#{dashboardMB.dynamicChartObj}" width="400" height="400"
  title="Quanity Wise">
  </pe:gChart>
</div>
GChartModelBuilder chartBuilder = new GChartModelBuilder();
chartBuilder.setChartType(GChartType.PIE);
chartBuilder.addColumns("Topping", "Slices");
chartBuilder.addRow("Sleep", 7);  
chartBuilder.addRow("Work", 6);
chartBuilder.addOption("pieSliceText", "value");
chartBuilder.addOption("tooltip.text", "value");
chartBuilder.addOption("legend","{ position: 'top', 'alignment': 'start' }");

chartSavingModel = chartBuilder.build();

我需要如下所示的工具提示。

对于 pieSliceText,chartBuilder.addOption("pieSliceText", "value");代码正常工作。如您所见,我添加了chartBuilder.addOption("tooltip.text", "value");,根据Google Charts 应该可以工作,但它不适用于工具提示。

【问题讨论】:

  • 请阅读 stackoverflow.com/help/tagging 并查看我的编辑
  • 我改进了您的编辑...添加解释等...很好...现在它仍然包含“不起作用”但检查了 WoAiNii 对答案的评论?检查客户端上的代码?那是调查和作为开发人员通常应该做的事情。干杯
  • 你可以试试chartBuilder.addOption("tooltip", "{text: 'value'}"); 或类似的东西
  • “无结果”再次成为最终用户的表述。像@WoAiNii 那样检查,客户端在 html 中
  • 我检查并发现图表的选项就像 - chart:"{\"type\":\"PieChart\",\"options\":{\"pieSliceText\":\ "value\",\"tooltip\":\"{text: \\u0027value\\u0027}\",\"legend\":\"{ 位置:\\u0027top\\u0027, \\u0027alignment\\u0027 : \\u0027start\\u0027 }\"} 与@WoAiNii 解释的相同。但是 chartBuilder.addOption("pieSliceText", "value"); 行代码正在工作。

标签: primefaces primefaces-extensions gchart


【解决方案1】:

我在上一个答案中只添加了一件事,要管理复杂的选项,您需要将它们作为Map 传递,而不是作为String,所以,在你的情况下,它变成这样:

HashMap<String, String> opt = new HashMap<String, String>();
opt.put("text", "value");
chartBuilder.addOption("tooltip", opt);

一切正常。

【讨论】:

  • 谢谢@WoAiNii,您的回答适用于工具提示,但对于图例等复合选项,我遇到了问题。我试图作为地图传递,但它不起作用
  • 我认为,在此之前,甚至该选项都被忽略了,而您看到的是默认配置; opt.put("position", "bottom"); opt.put("alignment", "start"); chartBuilder.addOption("legend", opt); 移到底部
【解决方案2】:

您只需要阅读 Google Charts 文档即可。 https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options

有一个名为tooltip.text 的属性默认为“both”。

tooltip.text

当用户将鼠标悬停在饼图上时要显示什么信息。支持以下值:

  • 'both' - [默认] 显示切片的绝对值和整体的百分比。
  • 'value' - 只显示切片的绝对值。
  • 'percentage' - 仅显示切片所代表的整体的百分比。

类型:字符串

默认值:“两者”

如何在java代码中添加这个可以看other answer

【讨论】:

  • 我需要将工具提示值更改为绝对值,不需要工具提示中的百分比值。您的回答将我的饼图值更改为定量值。我已经添加了用于更改上述工具提示值的代码,但它不起作用
  • @ManiRatna:我认为 Melloware 复制粘贴了错误的配置。我编辑了答案。仍然在链接中,只需阅读精美手册...
  • 我之前使用过 chartBuilder.addOption("tooltipt.text", "value") 并且它不起作用
  • 不适用于 pf 6.2 pf-ext 6.2.9 GoogleChart 不适用于var options={tooltip: {text: 'value'}}; pf 不适用于chartBuilder.addOption("backgroundColor","{fill: red}");,它会产生这个PrimeFaces.cw("ExtGChart","widget_j_idt4_j_idt6",{id:"j_idt4:j_idt6",chart:"{\"type\":\"PieChart\",\"options\":{\"tooltip\":\"{text: value}\"},\"data\":[[\"Topping\",\"Slices\"],[\"Sleep\",7],[\"Work\",6]]}",title:"Quanity Wise",language:"en",width:400,height:400});,对于复合选项来说似乎是这样的(related? )
  • 为什么 你没有提到你之前已经尝试过 tooltip.text ?请参阅How to Ask... 可以为我和 Melloware 节省 15 分钟...谢谢!顺便说一句,它被添加到 json 中,所以 PF 正在做它的工作。检查您是否以正确的方式使用它,以及使用的 gchart PFE 是否支持它......(PFE,而不是 PF)。并调查在 json 中添加选项的方式是否正确! @Melloware:看起来很奇怪,引用像 WoAiNii 发布的明智之举
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-03
  • 2018-11-11
  • 2021-01-11
  • 1970-01-01
相关资源
最近更新 更多