رسم بياني مصوّر بالشموع

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

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

نظرة عامة

رسم بياني بالشموع يتم عرضه كصورة باستخدام Google Charts API

يُستخدم مخطط الشمعدان لإظهار القيمة الافتتاحية والختامية متراكبة فوق تباين إجمالي. غالبًا ما يتم استخدام مخططات الشموع لإظهار سلوك قيمة الأسهم. في هذا المخطط، يتم رسم العناصر التي تكون فيها القيمة الافتتاحية أقل من القيمة الختامية باللون الأخضر، والعناصر التي تكون فيها القيمة الافتتاحية أكبر من القيمة الختامية يتم رسمها باللون الأحمر. يمكنك الاطّلاع على مستندات الشموع في واجهة برمجة تطبيقات Google Charts للحصول على مزيد من المعلومات.

مثال

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

جارٍ التحميل

اسم حزمة "google.charts.load" هو "imagechart". 

  google.charts.load('current', {packages: [imagechart]});

اسم فئة العرض المرئي هو google.visualization.ImageCandlestickChart. 

  var visualization = new google.visualization.ImageCandlestickChart(container);

تنسيق البيانات

خمسة أعمدة، حيث يصف كل صف علامة شمعدان واحدة:

  • العمود 0: سلسلة تُستخدم كتصنيف لهذه العلامة على المحور "س".
  • العمود 1: رقم يحدّد القيمة الأدنى/الأدنى لهذه العلامة. هذه هي قاعدة الخط الأسود.
  • العمود 2: رقم يحدّد القيمة الافتتاحية/الأولية لهذه العلامة. ويكون هذا حدًا عموديًا واحدًا للشمعة. إذا كانت قيمة العمود 3 أقل من قيمة العمود 3، ستكون الشمعة خضراء، وإلا فستكون حمراء.
  • العمود 3: رقم يحدّد القيمة الختامية/النهائية لهذه العلامة. هذا هو الحد العمودي الثاني للشمعة. إذا كانت قيمة العمود 2 أقل من قيمة العمود 2، ستكون الشمعة حمراء، وإلا فستكون خضراء.
  • العمود 4: رقم يحدّد القيمة العالية/الأقصى لهذه العلامة. هذا هو الجزء العلوي من الخط الأسود.

خيارات الضبط

بالإضافة إلى الخيارات التي يتيحها مخطط الصور العام، يتيح "مخطط الشموع" الخيارات التالية:

الاسم النوع القيمة التلقائية الوصف
backgroundColor سلسلة '#FFFFFF' (أبيض) لون خلفية الرسم البياني هذه سلسلة #RRGGBB، بما في ذلك علامة #.
showAxisLines boolean صحيح تحديد ما إذا كان سيتم إظهار خطوط المحور أم لا. في حال الضبط على "خطأ"، لن تظهر أيضًا تصنيفات المحاور.
الطول الرقم ارتفاع العنصر المتضمّن تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل. إذا كانت 30 < height أو height > 1,000، سيتم ضبط هذه القيمة تلقائيًا على 200.
الحد الأقصى الرقم الحد الأقصى لقيمة البيانات الحد الأقصى لقيمة المحور "ص".
دقيقة الرقم الحد الأدنى لقيمة البيانات الحد الأدنى لقيمة المحور "ص".
showCategoryLabels boolean صحيح إذا كانت القيمة "false"، يخفي تصنيفات المحور "س".
showValueLabels boolean صحيح إذا كانت القيمة "false"، يخفي تصنيفات المحور "ص".
showValueLabelsInternal الرقم تلقائي يشير ذلك المصطلح إلى التباعد بين تصنيفات المحور "ص" بالبكسل.
title سلسلة '' النص المطلوب عرضه أعلى الرسم البياني
العرض الرقم عرض العنصر المتضمّن عرض الرسم البياني بالبكسل إذا كانت width أقل من 30 أو أكبر من 1,000، سيتم ضبط width على 300.

الطُرق

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

الأحداث

يمكنك التسجيل للاستماع إلى الفعاليات الموضّحة في صفحة الرسم البياني للصور العامة.

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

يُرجى الرجوع إلى سياسة التسجيل في Chart API.