可视化：饼图（旧版）

已弃用

此可视化图表已替换为新版本，请改用新版本。为了轻松进行迁移，请参阅版本说明页面。

  1. Overview
  2. 示例
  3. 正在加载
  4. 数据格式
  5. 配置选项
  6. 方法
  7. 事件
  8. 数据政策

概览

在浏览器中使用 SVG 或 VML 呈现的饼图。 点击 Slice 时显示提示。点击图例条目时为切片添加动画效果。

开发者：Google

示例

在可视化园地中自行编写代码

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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 chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

正在加载

google.load 软件包名称为 "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

该可视化图表的类名称为 google.visualization.PieChart 

  var visualization = new google.visualization.PieChart(container);

数据格式

两列。 第一列应为字符串，并且包含切片标签。第二列应为数字，且包含切片值。

配置选项

名称 类型 默认 说明
backgroundColor 字符串或对象 默认颜色 图表主要区域的背景颜色。 从下列选项中选择一项：
  • 带有 HTML 支持颜色的字符串，例如“红色”或“#00cc00”，或者
  • 具有以下属性的 n 对象的说明：
    • stroke - 描述图表边框颜色的 HTML 颜色字符串。
    • fill - 描述图表背景颜色的 HTML 颜色字符串。
    • strokeSize - 一个数字，用于描述图表边框的厚度（以像素为单位）。对于无边框，可将此字段设置为 0。
      示例：{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。
borderColor 字符串或对象 默认颜色 图表元素周围的边框。 可能的值包括backgroundColor配置选项的值。
颜色 字符串或对象的数组 默认颜色

颜色数组，其中每个元素指定一个系列的颜色。 您应为每个系列指定一个数组元素。

  • 如果为 is3D=false，则是 HTML 颜色数组。示例：colors:['#00FF00','orange']
  • 如果为 is3D=true，则是 HTML 颜色或以下类型对象的数组：{color:face_color, darker:shade_color}，其中 color 是元素的人脸颜色，darker 是阴影颜色。 不过，如果您为 3D 对象指定 HTML 颜色，则人脸和阴影将具有相同的颜色，并且 3D 效果会降低。示例：{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}。
enableTooltip boolean true 如果设置为 true，则当用户点击 Slice 时，系统会显示提示。
focusBorderColor 字符串或对象 默认颜色 获得焦点（鼠标指向）的图表元素周围的边框。 可能的值包括backgroundColor配置选项的值。
高度 number 容器高度 图表的高度（以像素为单位）。
3D boolean false 如果设置为 true，则显示三维图表。
传奇 string “right” 图例的位置和类型。可以是以下某一项：
  • “right”- 位于图表右侧。
  • 'left' - 位于图表左侧。
  • “top”- 图表上方。
  • 'bottom' - 图表下方。
  • “label”- 切片附近的标签。
  • “none”- 不显示图例。
legendBackgroundColor 字符串或对象 默认颜色 图表图例区域的背景颜色。 可能的值包括backgroundColor配置选项的值。
legendFontSize number 自动 图例字体大小（以像素为单位）。
legendTextColor 字符串或对象 默认颜色 图例文本颜色。 可能的值包括backgroundColor配置选项的值。
pieJoinAngle number 0 小于此角度的所有切片都将合并到一个标记为“其他”的通用切片中。
pieMinimalAngle number 0

任何小于此角度的切片都不会绘制在饼图中（尽管仍会获得图例条目）。剩余的切片将展开，以固定比例填充饼图。注意：这可能会使表观值失真，尤其是在此数字较大时，因为正在从饼图中移除一定数量。

为了计算切片的大小，首先将小于 pieJoinAngle 的角度连接到“其他”切片，然后绘制所有大于 pieMinimalAngle 的切片
标题 string 无标题 要在图表上方显示的文本。
titleColor 字符串或对象 默认颜色 图表标题的颜色。 可能的值包括backgroundColor配置选项的值。
titleFontSize number 自动 图表标题的字体大小（以像素为单位）。

tooltipFontSize		 number 11 提示文本的字体大小。如果提示过小，无法容纳指定字体中的文本，可能会缩小该值。
tooltipHeight
 number 60 提示的高度（以像素为单位）。提示高度是固定的，绝不会为了适应文本的长度或字体大小而放大或缩小。但是，任何大于图表高度 1/3 的内容都将被剪裁。
tooltipWidth number 120 提示的宽度（以像素为单位）。提示宽度是固定的，绝不会为了适应文本的长度或字体大小而放大或缩小。但是，任何大于图表宽度的内容都将被剪裁。
宽度 number 容器宽度 图表的宽度（以像素为单位）。

方法

方法 返回值类型 说明
draw(data, options) 无 绘制图表。
getSelection() 选择元素数组 标准 getSelection() 实现。所选元素是行和单元格元素。用户一次可以选择多行和/或一个单元格。
setSelection() 无 标准 setSelection() 实现，但支持选择多行和/或一个单元格。将每个选择条目视为行或单元格选择。

事件

名称 说明 属性
onmouseover 用户将鼠标悬停在某个切片上时触发，并传入相应单元格的行索引和列索引。 行，列
onmouseout 用户将鼠标移开并传入相应单元格的行索引和列索引时触发。 行，列
ready 该图表已准备好进行外部方法调用。如果您想要与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为此事件设置监听器，并且仅在事件触发后调用监听器。 无
select

当用户点击切片或图例时触发。选择切片时，会选择数据表中的相应单元格；选择图例时，会选择数据表中的相应列。如需了解所选内容，请调用 getSelection()。

注意：点击某个切片并不会在选择和取消选择单元格之间切换；点击切片始终会选中该单元格。另一方面，点击图例条目可在选择和取消选择该行之间切换。

 无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。