تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

مخطّط سانكي البياني

Overview
مثال بسيط
سانكيز متعددة المستويات
التحكّم في الألوان
تخصيص الخطوط
ضبط العُقد
جارٍ التحميل
تنسيق البيانات
خيارات الإعداد
الطُرق
الأحداث
سياسة البيانات

نظرة عامة

المخطّط سانكي هو تمثيل بصري يستخدم لتصوير التدفق من مجموعة من القيم إلى أخرى. الأشياء التي يتم ربطها تُسمى العُقد وتُسمى الاتصالات الروابط. ويمكن استخدام Sankeys على أفضل نحو عندما تريد عرض تعيين "العديد من متعدد" بين نطاقين (مثل الجامعات والجامعات الكبرى) أو مسارات متعددة عبر مجموعة من المراحل (على سبيل المثال، تستخدم "إحصاءات Google" مفاتيح التصرف لإظهار كيفية تدفق الزيارات من الصفحات إلى الصفحات الأخرى على موقعك الإلكتروني).

أما إذا كان من الفضوليين، فتم تسميتها على اسم الكابتن سانكي الذي أنشأ مخطّطًا بيانيًا لكفاءة المحرك البخاري والذي استخدم أسهمًا بعرض متناسب مع انخفاض الحرارة.

ملاحظة: قد يخضع الرسم البياني سانكي لعمليات مراجعة كبيرة في إصدارات "قوائم الأغاني الرائجة" المستقبلية من Google.

يتم عرض مخططات سانكي في المتصفّح باستخدام SVG أو VML، أيهما يكون مناسبًا لمتصفِّح المستخدم. كود تخطيط سانكي في Google مشتق من كود تخطيط سانكي D3.

ملاحظة: لا تتوفّر الرسوم البيانية في Google Sankey في Microsoft Internet Explorer 8 والإصدارات السابقة.

مثال بسيط

افترض أن لديك فئتين، A وB، ترتبط بثلاث فئات أخرى، X وY وZ. بعض هذه الروابط أثقل من غيرها. على سبيل المثال، لدى B اتصال ضعيف بـ X واتصال أكثر سمكًا بـ Y.

جرِّب تمرير مؤشر الماوس فوق أحد الروابط لتمييز الرابط.

لإنشاء مخطط سانكي، قدم مجموعة من الصفوف، يحتوي كل منها على معلومات حول اتصال واحد: من، إلى، والوزن. بعد ذلك، استخدِم طريقة google.visualization.Sankey() لإعداد الرسم البياني ثم طريقة draw() لعرضه:

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
        };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
  </body>
</html>

ملاحظة: تجنّب الدورات في بياناتك: إذا كان المخطط A يؤدي إلى نفسه أو يؤدي إلى B روابط تؤدي إلى C ويربطه بـ A، فلن يتم عرض المخطط.

ملفات Sankey المتعددة المستويات

يمكنك إنشاء رسم بياني سانكي بمستويات متعددة من الاتصالات:

ستضيف مخططات سانكي مستويات إضافية حسب الحاجة، ويتم وضعها تلقائيًا. إليك الرمز الكامل للمخطط أعلاه:

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

التحكم في الألوان

بإمكان الرسوم البيانية في سانكي ضبط ألوان مخصّصة للعُقد والروابط. يمكن توفير لوحات ألوان مخصّصة لكل من العُقد والروابط باستخدام خيارَي colors (sankey.node.colors وsankey.link.colors على التوالي). ويمكن منحها أيضًا أوضاع تلوين مختلفة باستخدام الخيار colorMode.

إذا لم يتم تخصيص الألوان، فإنها افتراضية على لوحة المواد القياسية.

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

يمكنك التحكم في ألوان الروابط والعُقد والتصنيفات باستخدام خيارات التكوين. هنا، نحدد ثلاثة باستخدام نفس تدرج اللون ولكن مع سطوع مختلف:

في ما يلي الشكل الذي تظهر به هذه الخيارات:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

يمكنك أيضًا التحكّم في شفافية الروابط باستخدام الخيار sankey.link.color.fillOpacity:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

لإنشاء حد حول الروابط، استخدِم الخيارَين sankey.link.color.stroke وsankey.link.color.strokeWidth:

يمكن تحديد لون الخط إما بتنسيق RGB أو بواسطة الاسم الإنجليزي.

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

تخصيص التصنيفات

يمكن تخصيص النص في مخططات سانكي باستخدام sankey.node.label.fontName والأصدقاء:

إليك الخيار stanza للمخطط أعلاه:

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

يمكنك تعديل موضع التصنيفات بالنسبة إلى العُقد باستخدام الخيار sankey.node.labelPadding:

في المخطط أعلاه، أضفنا 30 بكسل من المساحة المتروكة بين التسميات والعقد.

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

ضبط العُقد

يمكنك التحكّم في عرض العُقد باستخدام sankey.node.width:

أعلاه، نُعيِّن عرض العقدة على 2.

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

يمكنك ضبط المسافة بين العُقد باستخدام sankey.node.nodePadding:

في الرسم البياني أعلاه، نضبط sankey.node.nodePadding على 80.

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

جارٍ التحميل

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

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

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

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

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

الصفوف: يمثل كل صف في الجدول اتصالاً بين تصنيفين. يشير العمود الثالث إلى قوة هذا الاتصال، وسينعكس في عرض المسار بين التسميات.

الأعمدة:

	العمود 0	العمود 1	العمود 2	...	العمود N (اختياري)
الغرض:	المصدر	الحساب	القيمة	...	الأدوار الاختيارية
نوع البيانات:	سلسلة	سلسلة	الرقم	...
الدور:	نطاق	نطاق	البيانات	...
أدوار الأعمدة الاختيارية:	بدون قفل	بدون قفل	بدون قفل	...	تلميح النمط

خيارات الضبط

الاسم
forceIFrame	لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames). النوع: قيمة منطقية الإعداد التلقائي: خطأ
الطول	تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل. النوع: رقم التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
sankey.iterations	في بعض الأحيان، لا يمكن أحيانًا وضع العُقد في مواضع متعددة لتسهيل القراءة في حال استخدام مفاتيح متعدّدة المستويات. يختبر محرك تنسيق D3 تنسيقات مختلفة للعُقد، ويتوقف عند إجراء محاولات `sankey.iterations`. وكلّما زاد هذا العدد، كان تصميم الرموز المعقّدة أكثر إرضاءً، ولكن الأمر مكلف، إذ أنّ عرض النتائج سيستغرق وقتًا أطول. وعلى العكس، كلما كان هذا العدد أقصر، سيتم عرض الرسوم البيانية بشكل أسرع. النوع: عدد صحيح القيمة التلقائية: 32
sankey.link	تتحكّم هذه السياسة في سمات الاتصالات بين العُقد. في الوقت الحالي، ترتبط جميع السمات باللون: sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border (default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } Type: كائن الإعداد التلقائي: قيمة خالية
sankey.link.colorMode	لتعيين وضع التلوين للروابط بين العقد. القيم المتاحة: `'source'`: يتم استخدام لون العقدة المصدر للروابط المؤدية إلى جميع العُقد الهدف. `'target'`: يتم استخدام لون العقدة المستهدَفة للرابط المؤدي إلى عُقدها المصدر. `'gradient'` - يتم تلوين الرابط بين العقدة المصدر والعقدة المستهدفة على شكل تدرج من لون العقدة المصدر إلى لون العقدة المستهدفة. `'none'` - هو الخيار التلقائي، وسيتم ضبط ألوان الروابط على اللون التلقائي (أو على اللون كما هو محدّد في الخيارَين `sankey.link.color.fill` و`sankey.link.color.fillOpacity`). يلغي هذا الخيار sankey.link.color. النوع: سلسلة تلقائي: 'بلا'
sankey.node	تتحكّم هذه السياسة في سمات العُقد (الأشرطة العمودية بين الروابط): sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } Type: كائن الإعداد التلقائي: قيمة خالية
sankey.node.colorMode	تعيين وضع تلوين لعُقد سانكي. القيم المتاحة: `'unique'` - ستحصل كل عقدة على لون فريد. النوع: سلسلة تلقائي: "فريدة"
تلميح	كائن يحتوي على أعضاء لضبط عناصر تلميح مختلفة. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: كائن الإعداد التلقائي: قيمة خالية
tooltip.isHtml	في حال ضبط السياسة على "صحيح"، يمكنك استخدام تلميحات الأدوات المعروضة بتنسيق HTML (بدلاً من عرضها بتنسيق SVG). راجِع تخصيص محتوى التلميح لمعرفة مزيد من التفاصيل. ملاحظة: لا يتيح العرض المرئي للرسم البياني الفقاعي تخصيص محتوى تلميح HTML من خلال دور بيانات عمود التلميح. النوع: قيمة منطقية الإعداد التلقائي: خطأ
tooltip.textStyle	كائن يحدد نمط نص التلميح. يحتوي الكائن على التنسيق التالي: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } يمكن أن تكون السمة `color` أي سلسلة لون HTML، على سبيل المثال: `'red'` أو `'#00cc00'`. اطّلِع أيضًا على `fontName` و`fontSize`. Type: كائن تلقائي: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
العرض	عرض الرسم البياني بالبكسل النوع: رقم الإعداد التلقائي: عرض العنصر المتضمّن

الطُرق

الطريقة
`draw(data, options)`	لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث `ready`. `Extended description`. نوع الإرجاع: لا شيء
`getBoundingBox(id)`	تعرض كائنًا يحتوي على يسار عنصر الرسم البياني `id` وأعلاه وعرضه وارتفاعه. لم يتم توثيق تنسيق `id` بعد (هذه هي القيم التي تعرضها معالِجات الأحداث)، ولكن إليك بعض الأمثلة: `var cli = chart.getChartLayoutInterface();` ارتفاع مساحة الرسم البياني `cli.getBoundingBox('chartarea').height` عرض الشريط الثالث في السلسلة الأولى من رسم بياني شريطي أو عمودي `cli.getBoundingBox('bar#0#2').width` مربع ربط الإسفين الخامس لمخطط دائري `cli.getBoundingBox('slice#4')` مربع ربط بيانات المخطط العمودي (على سبيل المثال، عمودي): `cli.getBoundingBox('vAxis#0#gridline')` مربع ربط بيانات المخطط لمخطط أفقي (على سبيل المثال، شريطي): `cli.getBoundingBox('hAxis#0#gridline')` ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم الرسم البياني. نوع الإرجاع: عنصر
`getSelection()`	تعرض صفيفًا من الكيانات المحددة في الرسم البياني. الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات. بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في أي وقت محدّد. `Extended description` . نوع الإرجاع: مصفوفة من عناصر الاختيار
`setSelection()`	لاختيار العناصر المحددة في الرسم البياني يؤدي هذا الإجراء إلى إلغاء أي اختيار سابق. الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات. بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في كل مرة. `Extended description` . نوع الإرجاع: لا شيء
`clearChart()`	يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له. نوع الإرجاع: لا شيء

الأحداث

الاسم
`error`	يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: المعرّف والرسالة
`onmouseover`	يتم الإطلاق عندما يمرر المستخدم الماوس فوق كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات وإدخال وسيلة إيضاح لعمود (فهرس الصف فارغ) وفئة إلى صف (فهرس العمود فارغ). الخصائص: الصف والعمود
`onmouseout`	يتم إطلاقها عندما يوجِّه المستخدم الماوس بعيدًا عن كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات وإدخال وسيلة إيضاح لعمود (فهرس الصف فارغ) وفئة إلى صف (فهرس العمود فارغ). الخصائص: الصف والعمود
`ready`	الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل استدعاء طريقة `draw`، وعدم الاتصال بها إلا بعد تنشيط الحدث. الخصائص: غير محدّدة
`select`	يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم `getSelection()`. الخصائص: غير محدّدة

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

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.