【问题标题】:How can we add custom css for Gchart?我们如何为 Gchart 添加自定义 CSS?
【发布时间】:2020-04-27 10:35:16
【问题描述】:

我需要在我的 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>

【问题讨论】:

  • 尽量把display: block;(需要的话加!important)给表格,这些标签的容器(不知道你用的是哪个图表,所以我不能给出确切的要使用的类,可能是.jqplot-table-legend)
  • 我已经尝试过了,但它不起作用
  • 最后能贴出一些代码吗?您可以使用主题或一些自定义 css 来覆盖。
  • @WoAiNii:最好是真正应用css specificity,而不是使用!important

标签: css primefaces gchart


【解决方案1】:

对于 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();

【讨论】:

  • @ManiRatna:这是在 GChartModelBuilder 中...您是否检查了其他链接?在那里添加了 CSS 类。通过引用一个类(名称),您可以在 css 中做任何事情......所以这就是您问题的答案。关于 %,请在新问题中提出新问题!
  • @Melloware:也许在示例中也添加一个.addOption('className', ...)?假设有效
  • options 被序列化为 JSON 到 Google Chart API,所以我认为您在 Google 文档中看到的任何选项都可以简单地添加到 GChart 选项中。
  • Map sliceStyle = new HashMap(); String colorRanges = "{ color: '#d81ad3',fontName: 'Arial',fontSize: 30, bold: true, italic: true }"; sliceStyle.put("pieSliceTextStyle", colorRanges); chartBuilder.addOption("sliceStyle", sliceStyle);我试过这样但它不起作用
猜你喜欢
  • 2016-07-03
  • 1970-01-01
  • 2022-08-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多