با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
<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>
گزینه ها را مشخص کنید
هر نمودار دارای بسیاری از گزینه های قابل تنظیم است، از جمله عنوان، رنگ ها، ضخامت خط، پر کردن پس زمینه و غیره. اگرچه تیم Chart Tools روی ظاهر نمودار پیش‌فرض سخت کار کرده است، ممکن است بخواهید نمودار خود را سفارشی کنید، مثلاً برچسب‌های عنوان یا محور را اضافه کنید.
با تعریف یک شی جاوا اسکریپت با ویژگی های option_name / option_value ، گزینه های سفارشی را برای نمودار خود مشخص کنید. از نام گزینه های فهرست شده در اسناد نمودار استفاده کنید. اسناد هر نمودار مجموعه ای از گزینه های قابل تنظیم را فهرست می کند. برای مثال، گزینه‌های موجود برای نمودار دایره‌ای شامل «افسانه»، «عنوان» و «is3D» است. همه گزینه ها دارای یک مقدار پیش فرض مستند هستند.
شی زیر موقعیت افسانه، عنوان نمودار، اندازه نمودار و یک گزینه سه بعدی را برای نمودار دایره ای تعریف می کند:
var options = {
'legend':'left',
'title':'My Big Pie Chart',
'is3D':true,
'width':400,
'height':300
}
شی گزینه های موجود در مثال بالا را با این مقادیر به روز کنید تا ببینید چگونه بر نمودار تأثیر می گذارد.
اندازه نمودار را مشخص کنید
یکی از گزینه های بسیار رایج برای تنظیم ارتفاع و عرض نمودار است. می توانید اندازه نمودار را در دو مکان مشخص کنید: در HTML عنصر <div> ظرف یا در گزینه های نمودار. اگر اندازه را در هر دو مکان مشخص کنید، نمودار به طور کلی به اندازه مشخص شده در HTML تغییر می کند. اگر اندازه نمودار را در HTML یا به عنوان یک گزینه مشخص نکنید، نمودار ممکن است به درستی ارائه نشود.
برای تعیین اندازه در یک مکان یا مکان دیگر مزایایی وجود دارد:
تعیین اندازه در HTML - یک نمودار ممکن است چند ثانیه طول بکشد تا بارگیری و ارائه شود. اگر اندازه کانتینر نمودار را قبلاً در HTML دارید، هنگام بارگیری نمودار، طرح‌بندی صفحه تغییر نخواهد کرد.
تعیین اندازه به عنوان گزینه نمودار - اگر اندازه نمودار در جاوا اسکریپت است، می توانید جاوا اسکریپت را کپی و جایگذاری کنید، یا سریال، ذخیره و بازیابی کنید و اندازه نمودار را به طور مداوم تغییر دهید.
تاریخ آخرین بهروزرسانی 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 webpage demonstrates how to create a basic pie chart using the Google Charts library and JavaScript.\u003c/p\u003e\n"],["\u003cp\u003eUsers can customize the chart's appearance through options like title, legend position, dimensions, and 3D effects.\u003c/p\u003e\n"],["\u003cp\u003eIt's recommended to specify chart size in either the HTML container or chart options for optimal rendering and layout.\u003c/p\u003e\n"],["\u003cp\u003eSpecifying chart size in HTML ensures a smoother page load while including it in chart options enhances portability and consistency.\u003c/p\u003e\n"]]],[],null,["# Customize 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\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\nSpecify options\n---------------\n\nEvery chart has many customizable options, including title, colors, line thickness, background fill, and so on. Although the Chart Tools team has worked hard on the default chart appearance, you might want to customize your chart, for example to add titling or axis labels.\n\nSpecify custom options for your chart by defining a JavaScript object with *option_name* /*option_value* properties. Use the option names listed in the chart's documentation. Every chart's documentation lists a set of customizable options. For example, the [options available for the Pie Chart](/chart/interactive/docs/gallery/piechart#Configuration_Options) include 'legend', 'title', and 'is3D'. All options have a documented default value.\n\nThe following object defines the legend position, chart title, chart size, and a 3D option for a Pie Chart: \n\n```\nvar options = {\n 'legend':'left',\n 'title':'My Big Pie Chart',\n 'is3D':true,\n 'width':400,\n 'height':300\n}\n```\n\nUpdate the options object in the example above with these values to see how they affect the chart.\n\nSpecify Chart Size\n------------------\n\nOne very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container `\u003cdiv\u003e` element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.\n\nThere are advantages to specifying the size in one or the other place:\n\n- **Specifying the size in HTML** - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.\n- **Specifying the size as a chart option** - If the chart size is in the JavaScript, you can copy and paste, or serialize, save, and restore the JavaScript and have the chart resized consistently.\n\n[**Next: *Drawing the Chart***](/chart/interactive/docs/basic_draw_chart)\n\nMore Information\n----------------\n\n- [Customizing charts](/chart/interactive/docs/customizing_charts)"]]
