با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
<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>
آخرین مرحله ترسیم نمودار است. ابتدا باید نمونه ای از کلاس نموداری را که می خواهید استفاده کنید نمونه سازی کنید و سپس باید draw() را روی آن فراخوانی کنید.
نمودار خود را نمونه برداری کنید
هر نوع نمودار بر اساس کلاس متفاوتی است که در اسناد نمودار ذکر شده است. به عنوان مثال، نمودار دایره ای بر اساس کلاس google.visualization.PieChart ، نمودار میله ای بر اساس کلاس google.visualization.BarChart و غیره است. هر دو نمودار دایره ای و میله ای در بسته هسته ای که در ابتدای این آموزش بارگذاری کردید گنجانده شده است. با این حال، اگر می‌خواهید یک نقشه درختی یا نمودار جغرافیایی در صفحه خود داشته باشید، باید بسته‌های 'treemap' یا 'geomap' را نیز بارگیری کنید .
سازندگان نمودار گوگل یک پارامتر واحد را می گیرند: ارجاع به عنصر DOM که در آن تصویرسازی را ترسیم می کند.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
نمودار خود را رسم کنید
پس از اینکه داده ها و گزینه های خود را آماده کردید، آماده ترسیم نمودار خود هستید.
صفحه شما باید یک عنصر HTML (معمولاً یک <div> ) برای نگهداری نمودار شما داشته باشد. شما باید نمودار خود را یک مرجع به این عنصر ارسال کنید، بنابراین یک شناسه به آن اختصاص دهید که می توانید از آن برای بازیابی یک مرجع با استفاده از document.getElementById() استفاده کنید. هر چیزی که در داخل این عنصر قرار دارد با ترسیم نمودار جایگزین می شود. در نظر بگیرید که آیا باید این عنصر <div> را به صراحت اندازه بگیرید ، اما در حال حاضر، اندازه نمودار را در <div> HTML مشخص کنید.
هر نمودار از یک متد draw() پشتیبانی می‌کند که دو مقدار می‌گیرد: یک شی DataTable (یا یک DataView ) که داده‌های شما را نگه می‌دارد، و یک شی اختیاری گزینه‌های نمودار. شی گزینه مورد نیاز نیست، و می‌توانید آن را نادیده بگیرید یا برای استفاده از گزینه‌های پیش‌فرض نمودار، آن را تهی کنید.
پس از فراخوانی draw() ، نمودار شما در صفحه رسم می شود. هر بار که داده ها یا گزینه ها را تغییر می دهید و می خواهید نمودار را به روز کنید، باید متد draw() را فراخوانی کنید.
متد draw() ناهمزمان است: یعنی بلافاصله برمی گردد، اما نمونه ای که برمی گرداند ممکن است فوراً در دسترس نباشد. در بسیاری از موارد این خوب است. در نهایت نمودار رسم خواهد شد. با این حال، اگر می‌خواهید پس از فراخوانی draw() مقادیری را روی نمودار تنظیم یا بازیابی کنید، باید منتظر بمانید تا رویداد آماده را پرتاب کند، که نشان‌دهنده پر شدن آن است. گوش دادن به رویدادها را در صفحه بعدی پوشش خواهیم داد.
عیب یابی
اگر نمودار شما روی صفحه رسم نمی شود، در اینجا چند روش وجود دارد که ممکن است به شما در حل مشکلات کمک کند:
به دنبال اشتباهات تایپی باشید به یاد داشته باشید که جاوا اسکریپت یک زبان حساس به حروف بزرگ و کوچک است.
از یک دیباگر جاوا اسکریپت استفاده کنید. در فایرفاکس، می‌توانید از کنسول جاوا اسکریپت، Venkman Debugger یا افزونه Firebug استفاده کنید. در کروم می توانید از ابزارهای توسعه دهنده (Shift + Ctl + J) استفاده کنید.
گروه بحث Google Visualization API را جستجو کنید. اگر نمی توانید پستی را پیدا کنید که به سؤال شما پاسخ دهد، سؤال خود را به همراه پیوندی به یک صفحه وب که مشکل را نشان می دهد به گروه ارسال کنید.
تاریخ آخرین بهروزرسانی 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\u003eThis content focuses on how to draw a Google chart, specifically a pie chart, using JavaScript and the Google Visualization API.\u003c/p\u003e\n"],["\u003cp\u003eIt explains the process of instantiating a chart object (e.g., \u003ccode\u003egoogle.visualization.PieChart\u003c/code\u003e) and calling the \u003ccode\u003edraw()\u003c/code\u003e method to render the chart within a designated HTML element.\u003c/p\u003e\n"],["\u003cp\u003eIt emphasizes the importance of providing data (using a \u003ccode\u003eDataTable\u003c/code\u003e) and optional chart options to the \u003ccode\u003edraw()\u003c/code\u003e method to customize the visualization.\u003c/p\u003e\n"],["\u003cp\u003eThe content also highlights the asynchronous nature of the \u003ccode\u003edraw()\u003c/code\u003e method and suggests troubleshooting steps if the chart doesn't render correctly.\u003c/p\u003e\n"]]],[],null,["# Draw the Chart\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//Div that will hold the pie chart\n \u003cdiv id=\"chart_div\" style=\"width:400; height:300\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe last step is to draw the chart. First you must instantiate an instance of the chart class that you want to use, and then you must call `draw()` on the it.\n\nInstantiate your chart\n----------------------\n\nEach chart type is based on a different class, listed in the chart's documentation. For instance, the pie chart is based on the `google.visualization.PieChart` class, the bar chart is based on the `google.visualization.BarChart` class, and so on. Both pie and bar charts are included in the corechart package that you loaded at the beginning of this tutorial. However, if you want a [treemap](/chart/interactive/docs/gallery/treemap#Loading) or [geo chart](/chart/interactive/docs/gallery/geomap) on your page, you must [additionally load the 'treemap' or 'geomap' packages](/chart/interactive/docs/basic_load_libs).\n\nGoogle chart constructors take a single parameter: a reference to the\nDOM element in which to draw the visualization. \n\n```javascript\n var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\n```\n\nDraw your chart\n---------------\n\nAfter you've prepared your data and options, you are ready to draw your chart.\n\nYour page must have an HTML element (typically a `\u003cdiv\u003e`) to hold your chart.\nYou must pass your chart a reference to this element,\nso assign it an ID that you can use to retrieve a reference using `document.getElementById()`.\nAnything inside this element will be replaced by the chart when it is\ndrawn. Consider [whether you should explicitly size this `\u003cdiv\u003e` element](/chart/interactive/docs/basic_customizing_chart#sizing), but for now, specify the chart size in the `\u003cdiv\u003e` HTML.\n\nEvery chart supports a `draw()` method that takes two values: a `DataTable` (or a `DataView`) object that holds your data, and an optional chart options object. The options object is not required, and you can ignore it or pass in null to use the chart's default options.\n\nAfter you call `draw()`, your chart will be drawn on the page. You should\ncall the `draw()` method\nevery time you change the data or the options and want to update the chart.\n\nThe `draw()` method is asynchronous: that is, it returns immediately, but the instance that it returns might not be immediately available. In many cases this is fine; the chart will be drawn eventually. However, if you want to set or retrieve values on a chart after you've called `draw()`, you must wait for it to throw the ready event, which indicates that it is populated. We'll cover listening for events in the next page. \n\n### Troubleshooting\n\nIf your chart doesn't draw on the page, here are some approaches that might help\nyou solve your problems:\n\n- Look for typos. Remember that JavaScript is a case-sensitive language.\n - Use a JavaScript debugger. In Firefox, you can use the JavaScript console, the [Venkman\n Debugger](http://www.mozilla.org/projects/venkman/), or the [Firebug\n add-on](https://addons.mozilla.org/en-US/firefox/addon/1843). In Chrome, you can use the developer tools (Shift + Ctl + J).\n- Search the [Google Visualization API discussion\n group](http://groups.google.com/group/google-visualization-api). If you can't find a post that answers your question, post your question to the group along with a link to a web page that demonstrates the problem.\n\n[**Next: *Draw Multiple Charts***](/chart/interactive/docs/basic_multiple_charts)\n\nMore Information\n----------------\n\n- [`draw()` method](/chart/interactive/docs/reference#visdraw)\n- [Chart Drawing Techniques](/chart/interactive/docs/drawing_charts)"]]
