准备数据
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
创建 DataTable
所有图表都需要数据。Google 图表工具图表要求将数据封装在名为 google.visualization.DataTable
的 JavaScript 类中。此类是在您之前加载的 Google 可视化图表库中定义的。
DataTable
是一个包含行和列的二维表,其中每一列都有一个数据类型、一个可选 ID 和一个可选标签。上面的示例创建了下表:
类型:字符串
标签:馅料 |
类型:数字
标签:切片 |
蘑菇 |
3 |
洋葱 |
1 |
橄榄 |
1 |
西印度果 |
1 |
意大利香肠 |
2 |
您可以通过多种方式创建 DataTable
;您可以在 DataTables 和 DataView 中查看每种方法的列表和比较结果。您可以在添加数据后修改数据,还可以添加、修改或移除列和行。
您必须按照图表要求的格式来组织图表的 DataTable
:例如,条形图和饼图都需要一个由两列构成的表格,其中每行代表一个切片或条形。第一列是切片或条形标签,第二列是切片或条形值。其他图表则需要采用不同且可能更复杂的表格格式。请参阅图表文档,了解所需的数据格式。
您可以查询支持图表工具数据源协议的网站(例如 Google 电子表格页面),而不是自行填充表。使用 google.visualization.Query
对象,您可以向网站发送查询,并接收可传递到图表中的已填充 DataTable
对象。请参阅高级主题查询数据源,了解如何发送查询。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-07-10。
[null,null,["最后更新时间 (UTC):2024-07-10。"],[[["\u003cp\u003eThe content demonstrates how to create a simple pie chart using the Google Charts library.\u003c/p\u003e\n"],["\u003cp\u003eIt explains the process of creating a \u003ccode\u003eDataTable\u003c/code\u003e object, which is used to hold the chart's data.\u003c/p\u003e\n"],["\u003cp\u003eThe example uses a two-column table where the first column represents the slice label and the second column represents the slice value.\u003c/p\u003e\n"],["\u003cp\u003eYou can populate the \u003ccode\u003eDataTable\u003c/code\u003e manually or query a data source like Google Spreadsheets using the \u003ccode\u003egoogle.visualization.Query\u003c/code\u003e object.\u003c/p\u003e\n"]]],[],null,["# Prepare the Data\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003c!--Load the AJAX API--\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n\n // Load the Visualization API and the piechart package.\n google.charts.load('current', {'packages':['corechart']});\n\n // Set a callback to run when the Google Visualization API is loaded.\n google.charts.setOnLoadCallback(drawChart);\n\n // Callback that creates and populates a data table, \n // instantiates the pie chart, passes in the data and\n // draws it.\n function drawChart() {\n\n // Create the data table.\n var data = new google.visualization.DataTable();\n data.addColumn('string', 'Topping');\n data.addColumn('number', 'Slices');\n data.addRows([\n ['Mushrooms', 3],\n ['Onions', 1],\n ['Olives', 1], \n ['Zucchini', 1],\n ['Pepperoni', 2]\n ]);\n\n // Set chart options\n var options = {'title':'How Much Pizza I Ate Last Night',\n 'width':400,\n 'height':300};\n\n // Instantiate and draw our chart, passing in some options.\n var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\n chart.draw(data, options);\n }\n \u003c/script\u003e\n \u003c/head\u003e\n\n \u003cbody\u003e\n\u003c!--Div that will hold the pie chart--\u003e\n \u003cdiv id=\"chart_div\" style=\"width:400; height:300\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCreate a `DataTable`\n--------------------\n\nAll charts require data. Google Chart Tools charts require data to be wrapped in a JavaScript\nclass called `google.visualization.DataTable`. This class is defined in the Google\nVisualization library that you loaded previously.\n\nA `DataTable` is a two-dimensional table with rows and columns, where each column has\na datatype, an optional ID, and an optional label. The example above creates the following\ntable:\n\n| type: string label: Topping | type: number label: Slices |\n|-----------------------------|----------------------------|\n| Mushrooms | 3 |\n| Onions | 1 |\n| Olives | 1 |\n| Zucchini | 1 |\n| Pepperoni | 2 |\n\nThere are several ways to create a `DataTable`; you can see a list and comparison of\neach technique in [DataTables and\nDataViews](/chart/interactive/docs/datatables_dataviews). You can modify your data after you add it, and add, edit, or remove columns and\nrows.\n\nYou must organize your chart's `DataTable` in a format that the chart expects: for\ninstance, both the [Bar](/chart/interactive/docs/gallery/barchart#Data_Format) and [Pie charts](/chart/interactive/docs/gallery/piechart#Data_Format) require a two-column\ntable where each row represents a slice or bar. The first column is the slice or bar label, and the\nsecond column is the slice or bar value. Other charts require different and possibly more complex\ntable formats. See your chart's documentation to learn the required data format.\n\nRather than populate a table yourself, you could instead query a website that supports the Chart\nTools Datasource protocol--for example, a Google Spreadsheets page. Using the\n`google.visualization.Query` object, you can send a query to a website and receive a\npopulated `DataTable` object that you can pass into your chart. See the advanced topic\n[Querying a Datasource](/chart/interactive/docs/queries) to learn how to send a\nquery. \n[**Next: *Customizing the\nChart***](/chart/interactive/docs/basic_customizing_chart)\n\nMore Information\n----------------\n\n- [DataTables and DataViews](/chart/interactive/docs/datatables_dataviews)\n- [DataTable reference documentation](/chart/interactive/docs/reference#DataTable)\n- [Querying a Datasource](/chart/interactive/docs/queries)"]]