重要提示:Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已正式弃用。根据我们的弃用政策,该政策将继续有效。
概览
使用 Google Charts API 以图片形式呈现的饼图。
示例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagepiechart"]}); 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 chart = new google.visualization.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "imagepiechart"
:
google.charts.load('current', {packages: ['imagepiechart']});
可视化图表的类名称为 google.visualization.ImagePieChart
var visualization = new google.visualization.ImagePieChart(container);
数据格式
两列。 第一列应为字符串,并包含切片标签。第二列应为数字,且包含切片值。
配置选项
您可以将以下选项指定为传递给可视化图表的 draw()
方法的 options 对象的一部分。
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
backgroundColor | 字符串 | '#FFFFFF'(白色) | 图表的背景颜色,采用 Chart API 颜色格式。 |
颜色 | 字符串 | 自动 | 指定用于所有系列的基本颜色;每个系列将是指定的颜色的渐变。颜色以 Chart API 颜色格式指定。
如果指定了 colors ,系统会忽略此参数。 |
颜色 | 数组<字符串> | 自动 | 使用此字段为每个数据系列分配特定颜色。颜色以 Chart API 颜色格式指定。
颜色 i 用于数据列 i;如果数据列多于颜色,则颜色 i 开始换行。如果所有系列都接受单一颜色的变体,请改用 color 选项。 |
启用事件 | 布尔值 | false | 使图表抛出用户触发的事件,例如点击或鼠标悬停。仅适用于特定图表类型。请参阅下面的事件。 |
高度 | number | 容器的高度 | 图表的高度(以像素为单位)。 |
is3D | 布尔值 | false | 如果设置为 true,则显示三维图表。 |
标签 | 字符串 | “无” | 针对每个切片显示的标签(如果有)。请从以下值中进行选择:
|
传奇 | 字符串 | “right” | 图例在图表上的位置。请从以下值中选择一个:“top”、“bottom”、“left”、“right”、“none”。 |
标题 | 字符串 | 无标题 | 要在图表上方显示的文字。 |
width | number | 容器的宽度 | 图表的宽度(以像素为单位)。 |
方法
方法 | 返回值类型 | 说明 |
---|---|---|
draw(data, options) |
无 | 绘制图表。 |
事件
您可以进行注册,听听通用图片图表页面中介绍的事件。
数据政策
请参阅 Chart API 日志记录政策。