概览
在浏览器中使用 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 度。(之所以如此选择,是因为这个特定角度恰好可以让“Italian”标签位于 Slice 内。)
<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
对象,并为适当的切片编号分配一个介于 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
从切片中移除文本,使用 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>
切片可见性阈值
您可以设置一个值,作为单独呈现饼图切片的阈值。此值对应于图表的一部分(整个图表的值为 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 列(可选) | |
---|---|---|---|---|
用途: | 切片标签 | 切片值 | ... | 可选角色 |
数据类型: | string | number | ... | |
角色: | 网域 | data | ... | |
可选的列角色: | 无 | 无 | ... |
配置选项
名称 | |
---|---|
backgroundColor |
图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 类型:字符串或对象
默认:“white”
|
backgroundColor.stroke |
图表边框的颜色,以 HTML 颜色字符串表示。 类型:字符串
默认:“#666”
|
backgroundColor.strokeWidth |
边框宽度(以像素为单位)。 类型:数字
默认值:0
|
backgroundColor.fill |
图表的填充颜色,采用 HTML 颜色字符串的形式。 类型:字符串
默认:“white”
|
chartArea |
一个对象,其中包含用于配置图表区域(绘制图表本身,不包括轴和图例)的位置和大小的成员。支持两种格式:数字或数字后跟 %。简单数字是以像素为单位的值;数字后跟 % 表示百分比。示例: 类型:object
默认值:null
|
chartArea.backgroundColor |
图表区域背景颜色。使用字符串时,它可以是十六进制字符串(例如,'#fdc') 或英文颜色名称。使用对象时,可以提供以下属性:
类型:字符串或对象
默认:“white”
|
chartArea.left |
从左侧边框绘制图表的距离。 类型:数字或字符串
默认:auto
|
chartArea.top |
从顶部边框绘制图表的距离。 类型:数字或字符串
默认:auto
|
chartArea.width |
图表区域宽度。 类型:数字或字符串
默认:auto
|
chartArea.height |
图表区域高度。 类型:数字或字符串
默认:auto
|
颜色 |
用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组
默认:默认颜色
|
enableInteractivity |
图表是抛出基于用户的事件,还是对用户互动做出响应。如果为 false,则图表不会抛出“select”或其他基于互动的事件(但会抛出 ready 事件或 error 事件),也不会显示悬停文本或根据用户输入进行其他更改。 类型:布尔值
默认值:true
|
fontSize |
图表中所有文字的默认字体大小(以像素为单位)。您可以使用特定图表元素的属性替换此设置。 类型:数字
默认:自动
|
fontName |
图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。 类型:字符串
默认:“Arial”
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 上,此选项会被忽略;所有 IE8 图表都是在 iframe 中绘制的。) 类型:布尔值
默认值:false
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认值:所包含元素的高度
|
3D |
如果为 true,则显示三维图表。 类型:布尔值
默认值:false
|
传奇 |
包含成员的对象,用于配置图例的各个方面。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 类型:object
默认值:null
|
legend.alignment |
图例的对齐方式。可以是下列选项之一:
起点、中心和终点是相对于图例的样式(垂直或水平)而言的。 例如,在“右侧”图例中,“start”和“end”分别位于顶部和底部;对于“顶部”图例,“start”和“end”分别位于区域的左侧和右侧。 默认值取决于图例的位置。对于“底部”图例,默认值为“center”;其他图例默认为“start”。 类型:字符串
默认:自动
|
legend.position |
图例的位置。可以是下列选项之一:
类型:字符串
默认:“right”
|
legend.maxLines |
图例中的行数上限。将此值设为大于 1 的数字即可向图例中添加线条。注意:用于确定实际渲染线条数的确切逻辑仍然处于变化之中。 此选项目前仅在 Legend.position 为“top”时有效。 类型:数字
默认值:1
|
legend.textStyle |
用于指定图例文本样式的对象。该对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
pieHole |
如果介于 0 和 1 之间,则显示圆环图。该孔的半径等于 类型:数字
默认值:0
|
pieSliceBorderColor |
切片边框的颜色。仅适用于二维图表。 类型:字符串
默认:“white”
|
pieSliceText |
切片上显示的文本内容。可以是下列选项之一:
类型:字符串
默认值:“percentage”
|
pieSliceTextStyle |
用于指定切片文本样式的对象。该对象的格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
pieStartAngle |
将图表旋转的角度(以度为单位)。如果使用默认值 类型:数字
默认值:
0 |
reverseCategories |
如果为 true,则逆时针绘制切片。默认方向为顺时针绘制。 类型:布尔值
默认值:false
|
pieResidueSliceColor |
包含低于 sliceVisibilityThreshold 的所有切片的组合切片的颜色。 类型:字符串
默认值:#ccc'
|
pieResidueSliceLabel |
组合切片的标签,其中包含低于 sliceVisibilityThreshold 的所有切片。 类型:字符串
默认:“其他”
|
切片 |
一个对象数组,其中每个对象都描述了饼图中相应切片的格式。要为切片使用默认值,请指定空对象(即
您可以指定对象数组,其中每个对象都会按给定顺序应用于切片;也可以指定一个对象,其中每个子对象都有一个数字键,用于指示其应用于哪个切片。例如,以下两个声明是相同的,将第一个切片声明为黑色,将第四个切片声明为红色: 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 类型:数字
默认:半度(.5/360、1/720 或 .0014)
|
标题 |
要在图表上方显示的文本。 类型:字符串
默认:无标题
|
titleTextStyle |
一个对象,用于指定标题文本样式。该对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
提示 |
包含用于配置各种提示元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} 类型:object
默认值:null
|
tooltip.ignoreBounds |
如果设置为 注意:这仅适用于 HTML 提示。如果通过 SVG 提示启用此功能,图表边界以外的任何溢出都将被剪裁。如需了解详情,请参阅自定义提示内容。 类型:布尔值
默认值:false
|
tooltip.isHtml |
如果此政策设为 true,系统会使用 HTML 渲染(而非 SVG 渲染)提示。如需了解详情,请参阅自定义提示内容。 注意:气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型:布尔值
默认值:false
|
tooltip.showColorCode |
如果为 true,则在提示中的切片信息旁边显示彩色方块。 类型:布尔值
默认值:false
|
tooltip.text |
用户将鼠标悬停在饼图切片上时显示的信息。支持以下值:
类型:字符串
默认:“选中二者”
|
tooltip.textStyle |
一个用于指定提示文本样式的对象。该对象的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
导致显示提示的用户互动:
类型:字符串
默认:“focus”
|
宽度 |
图表的宽度,以像素为单位。 类型:数字
默认值:所包含元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。只有在 Return Type(返回类型):none
|
getAction(actionID) |
返回具有所请求的 返回类型:object
|
getBoundingBox(id) |
返回一个对象,其中包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object
|
getChartAreaBoundingBox() |
返回一个对象,其中包含图表内容的左侧、顶部、宽度和高度(即不包括标签和图例):
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object
|
getChartLayoutInterface() |
返回一个对象,其中包含有关图表在屏幕上的位置及其元素的信息。 可以对返回的对象调用以下方法:
在绘制图表之后调用此方法。 返回类型:object
|
getHAxisValue(xPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number
|
getImageURI() |
返回已序列化为图片 URI 的图表。 在绘制图表之后调用此方法。 请参阅打印 PNG 图表。 返回类型:字符串
|
getSelection() |
返回所选图表实体的数组。
可选择的实体包括切片和图例条目。
对于此图表,在任何给定时刻,只能选择一个实体。
返回类型:选择元素数组
|
getVAxisValue(yPosition, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number
|
getXLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number
|
getYLocation(dataValue, optional_axis_index) |
返回 示例: 在绘制图表之后调用此方法。 Return Type(返回类型):number
|
removeAction(actionID) |
从图表中移除包含所请求 返回值类型:
none |
setAction(action) |
设置当用户点击操作文本时要执行的提示操作。
任何和所有提示操作都应在调用图表的 返回值类型:
none |
setSelection() |
选择指定的图表实体。取消之前的所有选择。
可选择的实体包括切片和图例条目。
对于此图表,一次只能选择一个实体。
Return Type(返回类型):none
|
clearChart() |
清除图表,并释放为其分配的所有资源。 Return Type(返回类型):none
|
事件
如需详细了解如何使用这些事件,请参阅基本互动、处理事件和触发事件。
名称 | |
---|---|
click |
当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。 属性:targetID
|
error |
尝试渲染图表时出错时触发。 属性:id、message
|
onmouseover |
用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。 切片或图例条目与数据表中的一行相关联(列索引为 null)。 属性:行、列
|
onmouseout |
用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 切片或图例条目与数据表中的一行相关联(列索引为 null)。 属性:行、列
|
ready |
该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法,则应在调用 属性:无
|
select |
当用户点击视觉实体时触发。如需了解已选择的内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。