概览
使用 SVG 或 VML 在浏览器中渲染的饼图。将鼠标悬停在切片上时显示提示。
示例
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
制作 3D 饼图
如果您将 is3D 选项设置为 true，则系统会以包含三个维度的形式绘制饼图：
is3D 的默认值为 false，因此在这里我们将其明确设置为 true：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
创建圆环图
圆环图是中部有一个孔的饼图。您可以使用 pieHole 选项创建圆环图：
pieHole 选项应设置为 0 到 1 之间的数字，对应于孔和图表之间的半径比。0.4 和 0.6 之间的数字对于大多数图表来说效果最佳。
系统会忽略等于或大于 1 的值，且值为 0 时将会完全关闭圆环。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
不能组合使用 pieHole 和 is3D 选项；否则，pieHole 将被忽略。
请注意，Google 图表会尝试将标签放置在尽可能靠近切片中心的位置。如果您的圆环图仅包含一个切片，则该切片的中心可能会落入圆环孔中。在这种情况下，请更改标签的颜色：
var options = {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['My all', 100],
]);
var options = {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donut_single" style="width: 900px; height: 500px;"></div>
</body>
</html>
旋转饼图
默认情况下，饼图从第一个切片的左边缘开始朝上。您可以使用 pieStartAngle 选项更改此设置：
在此示例中，我们使用 pieStartAngle: 100 选项将图表顺时针旋转 100 度。（之所以选择这个选项，是因为该特定角度使“意大利”标签正好适合切片。）
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['German', 5.85],
['French', 1.66],
['Italian', 0.316],
['Romansh', 0.0791]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
title: 'Swiss Language Use (100 degree rotation)',
pieStartAngle: 100,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
分解 Slice
您可以使用 slices 选项的 offset 属性将饼图切片与图表的其余部分分开：
如需分隔切片，请创建一个 slices 对象，并为 Slice 编号分配一个介于 0 和 1 之间的 offset。下面，我们将向切片 4（古吉拉特语）、12（马拉地语）、14（奥里亚语）和 15（旁遮普语）逐渐分配更大的偏移量：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
移除 Slice
如需省略切片，请将颜色更改为 'transparent'：
我们还使用 pieStartAngle 将图表旋转了 135 度，使用 pieSliceText 从 Slice 中移除了文本，使用 tooltip.trigger 停用了提示：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pac Man', 'Percentage'],
['', 75],
['', 25]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
pieStartAngle: 135,
tooltip: { trigger: 'none' },
slices: {
0: { color: 'yellow' },
1: { color: 'transparent' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('pacman'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="pacman" style="width: 900px; height: 500px;"></div>
</body>
</html>
Slice 可见性阈值
您可以将一个值设为饼图切片的阈值，以便单独进行呈现。此值对应于图表的一部分（整个图表的值均为 1）。如需将此阈值设置为占总百分比的百分比，请用所需的百分比除以 100（如果是 20% 的阈值，则值为 0.2）。
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
任何小于此阈值的切片将合并为一个“其他”切片，并且所有切片的总值将低于阈值。
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Pizza');
data.addColumn('number', 'Populartiy');
data.addRows([
['Pepperoni', 33],
['Hawaiian', 26],
['Mushroom', 22],
['Sausage', 10], // Below limit.
['Anchovies', 9] // Below limit.
]);
var options = {
title: 'Popularity of Types of Pizza',
sliceVisibilityThreshold: .2
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
正在加载
google.charts.load 软件包名称为 "corechart"。
google.charts.load("current", {packages: ["corechart"]});
可视化图表的类名称为 google.visualization.PieChart。
var visualization = new google.visualization.PieChart(container);
数据格式
行：表中的每一行都表示一个切片。
列：
| 第 0 列 | 第 1 列 | …… | 列 N（选填） | |
|---|---|---|---|---|
| 目的： | Slice 标签 | Slice 值 | …… | 可选角色 |
| 数据类型： | 字符串 | number | …… | |
| 角色： | 域 | 数据 | …… | |
| 可选的列角色： | 无 | 无 | …… |
配置选项
| 名称 | |
|---|---|
| backgroundColor |
图表主区域的背景颜色。可以是简单的 HTML 颜色字符串（例如 类型：字符串或对象
默认：“白色”
|
| backgroundColor.stroke 中 |
图表边框的颜色，采用 HTML 颜色字符串的形式。 类型：字符串
默认：'#666'
|
| backgroundColor.strokeWidth |
边框宽度（以像素为单位）。 类型：数字
默认：0
|
| backgroundColor.fill |
图表的填充颜色，以 HTML 颜色字符串表示。 类型：字符串
默认：“白色”
|
| 图表区域 |
一个具有成员的对象，用于配置图表区域的位置和大小（绘制图表本身时，不包括轴和图例）。支持两种格式：数字或后跟 % 的数字。简单的数字是一个以像素为单位的值，数字后跟 % 是一个百分比。示例： Type：对象
默认：null
|
| chartArea.backgroundColor |
图表区域背景颜色。使用字符串时，它可以是十六进制字符串（例如，“#fdc”）或英语颜色名称。使用对象时，可以提供以下属性：
类型：字符串或对象
默认：“白色”
|
| 图表区域 |
从左边框绘制图表的距离。 类型：数字或字符串
默认：自动
|
| 图表区域 |
从上边框绘制图表的距离。 类型：数字或字符串
默认：自动
|
| 图表区域.宽度 |
图表区域宽度。 类型：数字或字符串
默认：自动
|
| 图表.a.height |
图表区域高度。 类型：数字或字符串
默认：自动
|
| 颜色 |
用于图表元素的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如： 类型：字符串数组
默认：默认颜色
|
| 启用互动 |
图表是抛出基于用户的事件还是响应用户互动。如果设为 false，则图表不会抛出“select”事件或其他基于互动的事件（但会抛出“ready”或“error”事件），并且不会显示悬停文本或者根据用户输入以其他方式更改。 类型：布尔值
默认：true
|
| 字体大小 |
图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性来替换此设置。 类型：数字
默认：自动
|
| 字体名称 |
图表中所有文本的默认字体。您可以使用特定图表元素的属性来替换此设置。 类型：字符串
默认：“Nearline”
|
| forceIFrame |
在内嵌框架内绘制图表。（请注意，在 IE8 中，系统会忽略此选项；所有 IE8 图表都是在 iframe 中绘制的）。 类型：布尔值
默认：false
|
| 高度 |
图表的高度（以像素为单位）。 类型：数字
默认：包含元素的高度
|
| is3D |
如果为 true，则显示三维图表。 类型：布尔值
默认：false
|
| 传奇 |
包含用于配置图例各个方面的成员的对象。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示： {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type：对象
默认：null
|
| 图例匹配 |
图例的对齐方式。可以是下列选项之一：
起点、中心和终点相对于图例的样式（垂直或水平）。例如，在“right”图例中，“start”和“end”分别位于顶部和底部；对于“top”图例，“start”和“end”分别位于该区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例，默认值为“居中”；其他图例默认为“开始”。 类型：字符串
默认：自动
|
| 图例位置 |
图例的位置。可以是下列选项之一：
类型：字符串
默认：“right”
|
| 图例.max 行 |
图例中的行数上限。将此列设置为大于 1 的数字，以便为图例添加线条。注意：用于确定实际呈现的行数的准确逻辑仍在变化。 目前，仅当图例位置为“顶部”时，此选项才有效。 类型：数字
默认：1
|
| 图例样式 |
用于指定图例文本样式的对象。此对象的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type：对象
默认：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 饼洞 |
如果介于 0 到 1 之间，则显示圆环图。该孔的半径等于图表半径的 类型：数字
默认：0
|
| 饼状分块颜色 |
Slice 边框的颜色。仅适用于二维图表。 类型：字符串
默认：“白色”
|
| 饼图文本 |
Slice 上显示的文本内容。可以是下列选项之一：
类型：字符串
默认：'percentage'
|
| 饼图切片样式 |
用于指定切片文本样式的对象。此对象的格式如下： {color: <string>, fontName: <string>, fontSize: <number>}
Type：对象
默认：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 饼起始角度 |
图表的旋转角度（以度为单位）。默认值为 类型：数字
默认：
0 |
| 反向类别 |
如果为 true，则会逆时针绘制切片。默认按顺时针绘制。 类型：布尔值
默认：false
|
| 饼状分块颜色 |
保留所有切片低于 sliceVisibilityThreshold 的组合切片的颜色。 类型：字符串
默认：“#ccc”
|
| 饼状分块切片 |
用于组合所有切片（低于 SliceVisibilityThreshold）的所有切片的标签。 类型：字符串
默认：“其他”
|
| 切片 |
一个对象数组，其中每个对象描述饼图中相应切片的格式。如需为切片使用默认值，请指定空对象（即
您可以指定对象数组，每个对象按指定顺序应用于 Slice，也可以指定一个对象，其中每个子项都有一个表示其应用于的 Slice 的数字键。例如，以下两个声明是相同的，并将第一个切片声明为黑色，第四个切片声明为红色：
slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
类型：对象数组或包含嵌套对象的对象
默认：{}
|
| SliceVisibilityThreshold |
饼图的小数值，如果低于该比例，系统不会单独显示切片。所有未达到此阈值的切片都将合并为一个“其他”切片，其大小是其所有大小的总和。默认情况下，系统不会单独显示小于半度的任何切片。
// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
类型：数字
默认：半度（0.5/360、1/720 或 .0014）
|
| 标题 |
要在图表上方显示的文字。 类型：字符串
默认：无标题
|
| titleTextStyle |
用于指定标题文本样式的对象。此对象的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type：对象
默认：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 工具提示 |
一个具有成员的对象，用于配置各种提示元素。如需指定此对象的属性，您可以使用对象字面量表示法，如下所示： {textStyle: {color: '#FF0000'}, showColorCode: true}
Type：对象
默认：null
|
| hint.ignoreBounds |
如果设置为 注意：这仅适用于 HTML 提示。如果使用 SVG 工具提示启用此功能，则图表边界以外的任何溢出都将被剪裁。如需了解详情，请参阅自定义提示内容。 类型：布尔值
默认：false
|
| hint.isHTML |
如果设置为 true，则使用 HTML 呈现（而不是 SVG 渲染）的提示。如需了解详情，请参阅自定义提示内容。 注意：气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型：布尔值
默认：false
|
| tooltip.showColorCode |
如果为 true，则将在提示中的切片信息旁边显示彩色方块。 类型：布尔值
默认：false
|
| 提示 |
用户将鼠标悬停在饼图切片上时要显示的信息。可支持以下值：
类型：字符串
默认：“两者”
|
| 提示文本 |
用于指定提示文本样式的对象。此对象的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type：对象
默认：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
使提示显示的用户交互：
类型：字符串
默认：焦点
|
| width |
图表的宽度（以像素为单位）。 类型：数字
默认：包含元素的宽度
|
方法
| 方法 | |
|---|---|
draw(data, options) |
绘制图表。图表仅在 返回值类型：无
|
getAction(actionID) |
返回包含请求的 返回值类型：
|
getBoundingBox(id) |
返回一个对象，包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型：
|
getChartAreaBoundingBox() |
返回一个包含图表内容的左侧、顶部、宽度和高度的对象（即不包括标签和图例）：
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回值类型：
|
getChartLayoutInterface() |
返回一个对象，其中包含有关图表的屏幕位置及其元素的信息。 可以对返回的对象调用以下方法：
在绘制图表之后调用此方法。 返回值类型：
|
getHAxisValue(xPosition, optional_axis_index) |
返回 示例： 在绘制图表之后调用此方法。 返回值类型：数字
|
getImageURI() |
返回序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回值类型：返回值类型
|
getSelection() |
返回一组选定图表实体。
可选择的实体是 Slice 和图例条目。在此图表中，在任何时候都只能选择一个实体。
返回值类型：一组选择元素
|
getVAxisValue(yPosition, optional_axis_index) |
返回 示例： 在绘制图表之后调用此方法。 返回值类型：数字
|
getXLocation(dataValue, optional_axis_index) |
返回 示例： 在绘制图表之后调用此方法。 返回值类型：数字
|
getYLocation(dataValue, optional_axis_index) |
返回 示例： 在绘制图表之后调用此方法。 返回值类型：数字
|
removeAction(actionID) |
从图表中移除所请求的 返回值类型：
none |
setAction(action) |
设置要在用户点击操作文本时执行的提示操作。
所有提示提示操作均应在调用图表的 返回值类型：
none |
setSelection() |
选择指定的图表实体。取消之前选择的所有内容。
可选择的实体是 Slice 和图例条目。对于此图表，一次只能选择一个实体。
返回值类型：无
|
clearChart() |
清除该图表，并释放其分配的所有资源。 返回值类型：无
|
事件
如需详细了解如何使用这些事件，请参阅基本互动、处理事件和触发事件。
| 名称 | |
|---|---|
click |
在用户点击图表内时触发。可用于识别标题、数据元素、图例条目、轴、网格线或标签何时得到点击。 属性：targetID
|
error |
尝试渲染图表出错时触发。 属性：ID、消息
|
onmouseover |
用户将鼠标放在视觉实体上时触发。传递相应数据表元素的行索引和列索引。 切片或图例条目与数据表中的某一行（列索引为 null）相关联。 属性：行、列
|
onmouseout |
在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。 切片或图例条目与数据表中的某一行（列索引为 null）相关联。 属性：行、列
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互，并在绘制后调用方法，则应在调用 属性：无
|
select |
在用户点击视觉实体时触发。如需了解所选内容，请调用 属性：无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。