ملاحظة مهمة: لقد تم إيقاف جزء "مخططات الصور" في "أدوات مخططات Google" رسميًا اعتبارًا من 20 نيسان (أبريل) 2012. وسيبقى بإمكانك استخدامه وفقًا لسياسة الإيقاف المتّبعة لدينا.
نظرة عامة
رسم بياني شريطي يتم عرضه كصورة باستخدام Google Charts API.
مثال
<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);
تنسيق البيانات
يجب أن يكون العمود الأول سلسلة، وأن يحتوي على تسمية الفئة. يمكن أن يتبع هذا العدد أي عدد من الأعمدة، ولكن يجب أن تكون جميعها رقمية. يتم عرض كل عمود كمجموعة من الأشرطة. عندما يحتوي جدول البيانات على أكثر من عمود رقمي، يتم عرض القيم الموجودة في صف كأشرطة مكدسة.
خيارات الضبط
الاسم | النوع | القيمة التلقائية | الوصف |
---|---|---|---|
backgroundColor | سلسلة | '#FFFFFF' (أبيض) | لون خلفية الرسم البياني في تنسيق ألوان Chart API |
الألوان | مصفوفة<string> | تلقائية | استخدِم هذا الخيار لتحديد ألوان معيّنة لكل سلسلة بيانات. ويتم تحديد الألوان في تنسيق ألوان Chart API.
يُستخدم اللون i في عمود البيانات i، والذي يلتف حول البداية
إذا كان هناك أعمدة بيانات أكثر من الألوان. إذا كانت صيغ اللون الواحد مقبولة لكل السلاسل، استخدِم الخيار color
بدلاً من ذلك. |
enableEvents | boolean | false | يؤدي إلى طرح الرسوم البيانية للأحداث التي يشغّلها المستخدم، مثل النقر أو الماوس. لا تتوفّر هذه الميزة إلا لأنواع محددة من الرسوم البيانية. يمكنك الاطّلاع على الأحداث أدناه. |
الطول | الرقم | ارتفاع الحاوية | ارتفاع الرسم البياني بالبكسل |
isStacked | boolean | صحيح | تتحكّم هذه السياسة في ما إذا كان سيتم عرض أعمدة بيانات متعدّدة على شكل أشرطة مكدّسة (بدلاً من عرضها على شكل أشرطة مجمّعة). |
isVertical | boolean | false | تتحكّم هذه السياسة في ما إذا كانت الأشرطة عمودية. |
أسطورة | سلسلة | "يمين" | موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
|
الحد الأقصى | الرقم | تلقائية | الحد الأقصى للقيمة المراد عرضها في المحور "ص" |
دقيقة | الرقم | تلقائية | أدنى قيمة يمكن عرضها في المحور ص. |
showCategoryLabels | boolean | صحيح | في حال الضبط على "خطأ"، ستتم إزالة تصنيفات الفئات. |
showValueLabels | boolean | صحيح | وفي حال ضبطها على "خطأ"، ستتم إزالة تسميات القيم. |
title | سلسلة | بلا عنوان | النص المطلوب عرضه أعلى الرسم البياني |
valueLabelsInterval | الرقم | تلقائية | الفاصل الزمني الذي يتم خلاله إظهار تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة السمة min
هي 0 والقيمة max هي 100 والقيمة valueLabelsInterval
هي 20، سيعرض الرسم البياني تصنيفات المحاور على القيم التالية: (0 و20 و40 و60 و80 100). |
العرض | الرقم | عرض الحاوية | عرض الرسم البياني بالبكسل. |
الطُرق
الطريقة | نوع القيمة التي يتم عرضها | الوصف |
---|---|---|
draw(data, options) |
لا ينطبق | لرسم الرسم البياني. |
الأحداث
يمكنك التسجيل للاستماع إلى الفعاليات الموضّحة في صفحة الرسم البياني العام للصور.
سياسة البيانات
يُرجى الرجوع إلى سياسة التسجيل في Chart API.