التمثيل البصري: رسم بياني شريطي (صورة)

مهم: لقد تم جزء رسمي من جزء مخططات الصور في أدوات مخطط Google اعتبارًا من 20 نيسان (أبريل) 2012. وسيستمر العمل بموجب سياسة الإيقاف.

  1. نظرة عامة
  2. مثال
  3. جارٍ التحميل
  4. تنسيق البيانات
  5. خيارات الإعداد
  6. الطُرق
  7. الأحداث
  8. سياسة البيانات

نظرة عامة

رسم بياني شريطي يتم عرضه كصورة باستخدام واجهة برمجة تطبيقات مخططات 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 ارتفاع الحاوية ارتفاع المخطط بالبكسل.
مكدس منطقي صواب للتحكم في ما إذا كان سيتم عرض أعمدة بيانات متعددة كأشرطة مكدسة (بدلاً من التجميع).
رأسي منطقي خطأ يتحكم في ما إذا كانت الأشرطة رأسية أم لا.
أسطورة سلسلة 'لليمين' موضع ونوع وسيلة الإيضاح. يمكن أن تكون الحالة إحدى القيم التالية:
  • "right" - يسار المخطط.
  • "left" - يسار الرسم البياني.
  • "أعلى" - أعلى المخطط.
  • "bottom" - أسفل المخطط.
  • "لا شيء" - لا يتم عرض تسمية توضيحية.
الحد الأقصى number تلقائي الحد الأقصى للقيمة المطلوب عرضها في المحور "ص".
دقيقة number تلقائي القيمة الدنيا المطلوب عرضها في المحور "ص".
showCategoryLabels منطقي صواب وفي حال ضبطها على "خطأ"، تتم إزالة تصنيفات الفئات.
showValueLabels منطقي صواب وعند الضبط على "خطأ"، تتم إزالة تصنيفات القيم.
العنوان سلسلة بلا عنوان النص المطلوب عرضه أعلى المخطط.
فاصل زمني للتصنيفات number تلقائي الفاصل الزمني الذي يتم فيه عرض تصنيفات محور القيمة. على سبيل المثال، إذا كانت قيمة min هي 0 وmax هي 100 وvalueLabelsInterval 20، سيعرض الرسم البياني تصنيفات المحور على الرقم (0 و20 و40 و60 و80 100).
width number عرض الحاوية عرض المخطط بالبكسل.

الطرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق لرسم المخطط.

الأحداث

يمكنك التسجيل لسماع الأحداث الموضّحة في صفحة مخطّط الصور العام.

سياسة البيانات

يُرجى الرجوع إلى سياسة تسجيل واجهة برمجة التطبيقات للرسم البياني.