با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
<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.visualization.DataTable پیچیده شوند. این کلاس در کتابخانه Google Visualization که قبلاً بارگیری کرده اید تعریف شده است.
DataTable یک جدول دو بعدی با ردیف و ستون است که در آن هر ستون یک نوع داده، یک شناسه اختیاری و یک برچسب اختیاری دارد. مثال بالا جدول زیر را ایجاد می کند:
نوع: رشته برچسب: تاپینگ
نوع: شماره برچسب: برش ها
قارچ
3
پیازها
1
زیتون
1
کدو سبز
1
پپرونی
2
چندین راه برای ایجاد DataTable وجود دارد. می توانید لیست و مقایسه هر تکنیک را در DataTables و DataViews مشاهده کنید. می‌توانید داده‌های خود را پس از افزودن آن‌ها تغییر دهید و ستون‌ها و ردیف‌ها را اضافه، ویرایش یا حذف کنید.
شما باید DataTable نمودار خود را در قالبی سازماندهی کنید که نمودار انتظار دارد: به عنوان مثال، هر دو نمودارمیله ای و دایره ای به یک جدول دو ستونی نیاز دارند که در آن هر ردیف نشان دهنده یک برش یا میله است. ستون اول برچسب برش یا نوار و ستون دوم مقدار برش یا نوار است. نمودارهای دیگر به قالب های جدول متفاوت و احتمالاً پیچیده تری نیاز دارند. برای یادگیری قالب داده های مورد نیاز، به مستندات نمودار خود مراجعه کنید.
به جای پر کردن جدول، می‌توانید وب‌سایتی را که از پروتکل Chart Tools Datasource پشتیبانی می‌کند - برای مثال، صفحه‌گسترده‌های Google - پرس و جو کنید. با استفاده از شی google.visualization.Query ، می توانید یک پرس و جو را به یک وب سایت ارسال کنید و یک شی DataTable پر شده را دریافت کنید که می توانید آن را در نمودار خود ارسال کنید. برای یادگیری نحوه ارسال پرس و جو به مبحث پیشرفته Querying a Datasource مراجعه کنید.
تاریخ آخرین بهروزرسانی 2024-07-10 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 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)"]]
