مهم: لقد تم جزء رسمي من جزء مخططات الصور في أدوات مخطط Google اعتبارًا من 20 نيسان (أبريل) 2012. وسيستمر العمل بموجب سياسة الإيقاف.
نظرة عامة
رسم بياني خطي يتم عرضه كصورة باستخدام واجهة برمجة تطبيقات مخططات Google.
مثال
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagelinechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
جارٍ التحميل
اسم الحزمة google.charts.load
هو "imagelinechart"
.
google.charts.load('current', {packages: ['imagelinechart']});
اسم فئة التمثيل البصري هو google.visualization.ImageLineChart
.
var visualization = new google.visualization.ImageLineChart(container);
تنسيق البيانات
يجب أن يكون العمود الأول إحدى السلاسل وأن يحتوي على تسمية الفئة. يمكن أن يتبع هذا العمود أي عدد من الأعمدة، ويجب أن تكون جميع هذه الأعمدة رقمية. يتم عرض كل عمود كخط منفصل.
خيارات الضبط
الاسم | النوع | القيمة التلقائية | الوصف |
---|---|---|---|
لون الخلفية | سلسلة | '#FFFFFF' (أبيض) | لون خلفية الرسم البياني بتنسيق لون واجهة برمجة التطبيقات للرسم البياني. |
ألوان | مصفوفة<string> | تلقائي | استخدِم هذا الإعداد لتخصيص ألوان محدّدة لكل سلسلة بيانات. ويتم تحديد الألوان بالتنسيق اللوني لواجهة برمجة تطبيقات الرسم البياني.
يُستخدم اللون i لعمود البيانات i، مع الالتفاف حول بدايته إذا كان عدد أعمدة البيانات أكبر من عدد الألوان. إذا كانت الصيغ ذات اللون الواحد
مقبولة لجميع السلاسل، استخدِم الخيار color
بدلاً من ذلك. |
تمكين الأحداث | منطقي | خطأ | يتسبب في عرض المخططات لأحداث من إنشاء المستخدم مثل النقر أو الماوس. غير متاح إلا لأنواع محددة من المخططات. راجع الأحداث أدناه. |
الارتفاع | number | ارتفاع الحاوية | ارتفاع المخطط بالبكسل. |
أسطورة | سلسلة | 'لليمين' | موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
|
الحد الأقصى | number | تلقائي | الحد الأقصى للقيمة المطلوب عرضها في المحور "ص". |
دقيقة | number | تلقائي | القيمة الدنيا المطلوب عرضها في المحور "ص". |
إظهار خطوط المحور | منطقي | صواب | وعند الضبط على "خطأ"، تتم إزالة خطوط المحاور والتصنيفات. |
showCategoryLabels | منطقي | مثل showAxisLines | في حال الضبط على "خطأ"، تتم إزالة تصنيفات الفئات (تصنيفات المحور "س"). |
showValueLabels | منطقي | مثل showAxisLines | وعند الضبط على "خطأ"، تتم إزالة تصنيفات القيم (تصنيفات المحور "ص"). |
العنوان | سلسلة | بلا عنوان | النص المطلوب عرضه أعلى المخطط. |
فاصل زمني للتصنيفات | number | تلقائي | الفاصل الزمني الذي يتم فيه عرض تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة min هي 0 وmax هي 100 وvalueLabelsInterval
20، سيعرض الرسم البياني تصنيفات المحور على الرقم (0 و20 و40 و60 و80 100). |
width | number | عرض الحاوية | عرض المخطط بالبكسل. |
الطرق
الطريقة | نوع القيمة التي يتم عرضها | الوصف |
---|---|---|
draw(data, options) |
لا ينطبق | لرسم المخطط. |
الأحداث
يمكنك التسجيل لسماع الأحداث الموضّحة في صفحة مخطّط الصور العام.
سياسة البيانات
يُرجى الرجوع إلى سياسة تسجيل واجهة برمجة التطبيقات للرسم البياني.