使用圆形边框和切片边距自定义 Google Visualization PieChart 外观

Posted 2023-02-19

【中文标题】使用圆形边框和切片边距自定义 Google Visualization PieChart 外观

【英文标题】：Customizing Google Visualization PieChart look and feel with circular border and slice margins

【发布时间】：2011-11-18 03:10:05

【问题描述】：

我正在使用 Google 的 Visualization API 在我的网络应用程序中创建嵌入式饼图。

http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html

API 工作得很好，我只是在外观自定义方面遇到了问题。

http://code.google.com/apis/chart/interactive/docs/customizing_charts.html

我不知道是否有办法：

使饼图周围的边框为圆形而不是矩形

编辑饼图边距/分隔符的宽度和颜色？

【问题讨论】：

你找到答案了吗？我遇到了同样的问题...

+1 到处寻找自定义图表链接。

【参考方案1】：

我会这样做：

在 Firefox 中使用 Firebug 选择图表并查看 CSS。使用 Firebug 选择边框的名称。

下一步：

1.) 创建一个 CSS 以删除边框并将图表嵌入到具有所需边框的 DIV 中。根据浏览器的兼容性，您可能希望使用图像而不是 CSS 作为圆角边框。

或

2.) 使用 CSS 将边框更改为您想要的。

【讨论】：

Google 可视化将图表内容加载到 IFrame 中，因此我认为我无法覆盖页面中加载的 css 中的样式。通过使用 chrome 开发人员工具，我确实注意到颜色是由路径元素的笔画和笔画宽度值设置的。但是这些值不会被 backgroundColor:fill,stroke,strokeWidth 改变。