概览
使用 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 |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。