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

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

نظرة عامة

خطوط مؤشر فردية أو متعددة يتم عرضها مع الصور باستخدام واجهة برمجة تطبيقات مخططات Google. يتم تضمين الصور في جدول HTML.

مثال

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

جارٍ التحميل

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

  google.charts.load("current", {packages: ["imagesparkline"]});

اسم فئة التمثيل البصري هو google.visualization.ImageSparkLine.

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

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

أي عدد من الأعمدة. يجب أن تكون جميع الأعمدة أرقامًا. يتم عرض كل عمود كخط مؤشر واحد.

خيارات الضبط

الاسم النوع القيمة التلقائية الوصف
لون سلسلة لتحديد لون لاستخدامه لجميع الرسوم البيانية. سلسلة بتنسيق #rrggbb. على سبيل المثال: "#00cc00". يتم استخدامه فقط إذا لم يتم تحديد خيار colors.
ألوان مصفوفة من السلاسل الألوان التلقائية الألوان التي يمكن استخدامها لأعمدة البيانات. مصفوفة من السلاسل التي يكون فيها كل عنصر عبارة عن سلسلة بالتنسيق #rrggbb. على سبيل المثال: "#00cc00". يتم استخدام اللون i لعمود البيانات i. إذا كان عدد الألوان أقل من عدد الأعمدة، سيلتفّ لون الاختيار.
fill منطقي خطأ في حال التعيين على "true"، سيتم ملء المنطقة أسفل الخط باللون.
الارتفاع number ارتفاع الحاوية ارتفاع الصور بالبكسل.
موضع التصنيف سلسلة لا ينطبق موضع التصنيفات. القيم المسموح بها هي 'none' و'left' و'right'.
الحد الأقصى مصفوفة الأرقام الحد الأقصى لقيمة البيانات لكل خط مؤشر تمثّل هذه السمة أعلى قيمة لنطاق قيمة البيانات لكل خط مؤشر. يجب أن يتطابق الفهرس في المصفوفة مع فهرس العمود في "جدول البيانات". إذا كانت جميع القيم فارغة، ستكون هذه هي أقصى قيمة في السلسلة.
دقيقة مصفوفة الأرقام الحد الأدنى لقيمة بيانات كل خط مؤشر أقل قيمة لنطاق قيمة البيانات لكل خط مؤشر. يجب أن يتطابق الفهرس في المصفوفة مع فهرس العمود في "جدول البيانات". إذا كانت كل القيم فارغة، ستكون هذه القيمة الحد الأدنى في السلسلة.
إظهار خطوط المحور منطقي صواب إذا كانت القيمة "true"، سيتم عرض خطوط المحور. وإذا كانت القيمة "false"، تكون القيمة "false"، والإعداد التلقائي لـ showValueLabels هو "false".
showValueLabels منطقي true، إلا إذا كانت showAxisLines خاطئة. إذا كانت القيمة "true"، سيتم عرض تصنيفات محور القيمة.
العنوان مصفوفة من السلاسل لا يتم عرض أي عناوين. العناوين المطلوب استخدامها لكل خط مؤشر.
width number عرض الحاوية عرض المخططات بالبكسل.
التصميم سلسلة "v" تخطيط رأسي أو أفقي: "v" للوضع الرأسي، و"h" للوضع الأفقي.

الطرق

الطريقة نوع القيمة التي يتم عرضها الوصف
draw(data, options) لا ينطبق لرسم المخطط.
getSelection() مصفوفة عناصر التحديد لعرض فهارس المخططات المختارة كمصفوفة من العناصر. يحتوي كل كائن على خاصية عمود تحتوي على رقم عمود خط مؤشر محدّد. يمكن عرض أكثر من عمود واحد تم اختياره.
setSelection(selection) لا ينطبق لاختيار خطوط المؤشر المحدّدة وإلغاء تحديد أي خط مؤشر غير محدّد. الاختيار عبارة عن مصفوفة من الكائنات، لكل منها خاصية column رقمية، وهي عبارة عن فهرس خط المؤشر المحدد. يمكنك الاطّلاع على setSelection() للحصول على مزيد من المعلومات.

الأحداث

الاسم الوصف أماكن إقامة
اختيار حدث اختيار عادي. لا ينطبق

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

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