Google Chart API - 饼图描边选项不生效
我正在使用 Google 饼图 API。
一切工作正常,除了 border: 和 strokeWidth: 的选项。无论我将它们设置为什么,都不会改变。
我的背景颜色是深色,切片之间的线条是白色的。我正在尝试将它们更改为与背景相同的颜色。我也无法改变这些线的宽度。
这是我的代码:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('poll-chart')).
draw(data, {
title:"",
fontSize: "12",
legend: "none",
width: 200,
height: 200,
chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" }
});
}
</script>
我从此页面上的选项引用 Google API:
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Configuration_Options
我不确定我是否做错了什么或 不是。
非常感谢您的帮助或指导!
谢谢, 迈克尔.
编辑:
好的,看来我弄乱的属性与整个图表的外部笔画有关,而不是与每个切片有关。但我仍然被困住了。有谁知道如何缩小切片之间的白色间隙?我在谷歌上找不到任何关于此的信息。
I'm playing around with the Google pie chart API.
Everything is working fine, except for the options for stroke: and strokeWidth: . No matter what I set them to, nothing changes.
I have a dark background colour, and the lines between the slices are white. I'm trying to change them to the same colour as the background. I also can't change the width of these lines.
Here is my code:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('poll-chart')).
draw(data, {
title:"",
fontSize: "12",
legend: "none",
width: 200,
height: 200,
chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" }
});
}
</script>
I am referencing the Google API from the options on this page:
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Configuration_Options
I'm not sure if I am doing something wrong or not.
Your help or guidence would be much appreciated!
Thanks,
Michael.
EDIT:
Ok, so it seems that the properties I was messing with are concerned with the outer stroke of the whole chart and not for each slice. I am still stuck though. Does anyone know how I can close the white gaps between the slices? I cannot find anything on Google about this.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用pieSliceBorderColor。自从提出这个问题以来,这可能已被添加,但对于将来的任何参考,这就是您的做法。注意:这仅适用于 2D 饼图
Use
pieSliceBorderColor
. This might have been added since this question was asked but for any future reference this is how you do it. Note: this will only work on a 2D pie chart