时间戳

首页 > 解决方案 > 我们如何为 Gchart 添加自定义 CSS？

css - 我们如何为 Gchart 添加自定义 CSS？

问题描述

我需要在我的 Gchart 中添加自定义 css。我可以将索引标签放在同一行中。我还想为索引标签提供自定义字体。在检查页面时，所有索引都在 g 标签内，我为 g 标签添加了 css，但它不起作用。我还需要修改工具提示样式并从每个图表切片中删除“%”。我怎样才能做到这一点？

在此处输入图像描述

我的代码：

<style>
.myPanel.ui-panel{
    width:55% !important;
}
g{
font-family: Verdana !important;
display: block !important;
}
</style>
<div id="savChart">
  <pe:gChart value="#{dashboardMB.dynamicChartObj}" width="500" height="400"
  title="Quanity Wise">
  </pe:gChart>
</div>

标签： cssprimefacesgchart

解决方案

对于 GGcharts，请参阅有关如何自定义颜色的文档：https ://developers.google.com/chart/interactive/docs/customizing_charts

然后在你的 GChartModelBuilder 做这样的事情..

 new GChartModelBuilder()
    .setChartType(getChartType())
    .addOption("fontName", "Roboto")
    .addOption("colors", Arrays.asList("#e0440e", "#e6693e"))
    .addColumns(new DefaultGChartModelColumn("Topping", "string"),
                new DefaultGChartModelColumn("Slices", "number"))
    .addRow("Mushrooms", mushrooms).addRow("Onions", onions).build();

推荐阅读