مهم: لقد تم جزء رسمي من جزء مخططات الصور في أدوات مخطط 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:["imagebarchart"]}); 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.ImageBarChart(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
هو "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
اسم فئة التمثيل البصري هو google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
تنسيق البيانات
يجب أن يكون العمود الأول إحدى السلاسل وأن يحتوي على تسمية الفئة. يمكن أن يتبع هذا العمود أي عدد من الأعمدة، ويجب أن تكون جميع هذه الأعمدة رقمية. يتم عرض كل عمود كمجموعة من الأشرطة. عندما يحتوي جدول البيانات على أكثر من عمود رقمي واحد، يتم عرض القيم في أحد الصفوف كأشرطة مكدسة.
خيارات الضبط
الاسم | النوع | القيمة التلقائية | الوصف |
---|---|---|---|
لون الخلفية | سلسلة | '#FFFFFF' (أبيض) | لون خلفية الرسم البياني بتنسيق لون واجهة برمجة التطبيقات للرسم البياني. |
ألوان | مصفوفة<string> | تلقائي | استخدِم هذا الإعداد لتخصيص ألوان محدّدة لكل سلسلة بيانات. ويتم تحديد الألوان بالتنسيق اللوني لواجهة برمجة تطبيقات الرسم البياني.
يُستخدم اللون i لعمود البيانات i، مع الالتفاف حول بدايته إذا كان عدد أعمدة البيانات أكبر من عدد الألوان. إذا كانت الصيغ ذات اللون الواحد
مقبولة لجميع السلاسل، استخدِم الخيار color
بدلاً من ذلك. |
تمكين الأحداث | منطقي | خطأ | يتسبب في عرض المخططات لأحداث من إنشاء المستخدم مثل النقر أو الماوس. غير متاح إلا لأنواع محددة من المخططات. راجع الأحداث أدناه. |
الارتفاع | number | ارتفاع الحاوية | ارتفاع المخطط بالبكسل. |
مكدس | منطقي | صواب | للتحكم في ما إذا كان سيتم عرض أعمدة بيانات متعددة كأشرطة مكدسة (بدلاً من التجميع). |
رأسي | منطقي | خطأ | يتحكم في ما إذا كانت الأشرطة رأسية أم لا. |
أسطورة | سلسلة | 'لليمين' | موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
|
الحد الأقصى | number | تلقائي | الحد الأقصى للقيمة المطلوب عرضها في المحور "ص". |
دقيقة | number | تلقائي | القيمة الدنيا المطلوب عرضها في المحور "ص". |
showCategoryLabels | منطقي | صواب | وفي حال ضبطها على "خطأ"، تتم إزالة تصنيفات الفئات. |
showValueLabels | منطقي | صواب | وعند الضبط على "خطأ"، تتم إزالة تصنيفات القيم. |
العنوان | سلسلة | بلا عنوان | النص المطلوب عرضه أعلى المخطط. |
فاصل زمني للتصنيفات | number | تلقائي | الفاصل الزمني الذي يتم فيه عرض تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة min هي 0 وmax هي 100 وvalueLabelsInterval
20، سيعرض الرسم البياني تصنيفات المحور على الرقم (0 و20 و40 و60 و80 100). |
width | number | عرض الحاوية | عرض المخطط بالبكسل. |
الطرق
الطريقة | نوع القيمة التي يتم عرضها | الوصف |
---|---|---|
draw(data, options) |
لا ينطبق | لرسم المخطط. |
الأحداث
يمكنك التسجيل لسماع الأحداث الموضّحة في صفحة مخطّط الصور العام.
سياسة البيانات
يُرجى الرجوع إلى سياسة تسجيل واجهة برمجة التطبيقات للرسم البياني.