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

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

الطرق

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

الأحداث

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

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

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