مخطط Sankey

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

نظرة عامة

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

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

ملاحظة: قد يتم إجراء نُسخ سابقة مهمة من الرسم البياني الخاص بالرسم البياني في إصدارات "خرائط Google" المستقبلية.

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

ملاحظة: لا تتوفر مخططات سان فرانسيسكو من Google في الإصدار Microsoft Internet Explorer 8 والإصدارات الأقدم.

مثال بسيط

لنفترض أنّ لديك فئتان (أ) و(ب) ترتبطان بثلاث فئات أخرى هي 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>

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

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

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

ستضيف الرسوم البيانية 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:

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

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

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

يمكن تخصيص النص على الرسوم البيانية ال تجنَّبة باستخدام sankey.node.label.fontName والأصدقاء:

إليك الخيار الخاص بالرسم البياني أعلاه:

    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 (اختياري)
الغرض: المصدر الوجهة القيمة ... الأدوار الاختيارية
نوع البيانات: سلسلة سلسلة الرقم ...
الدور: النطاق النطاق البيانات ...
أدوار الأعمدة الاختيارية:

بدون قفل

بدون قفل

بدون قفل

 ...

 

خيارات الإعداد

الاسم
فرض عرض الإطار

يرسم الرسم البياني داخل إطار مضمّن. (يُرجى العِلم بأنّه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية في IE8 في إطارات i.)

النوع: قيمة منطقية
تلقائي: خطأ
الطول

ارتفاع الرسم البياني، بالبكسل.

النوع:
تلقائي: ارتفاع العنصر الذي يتضمّن العنصر
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'
    ]
  }
}
النوع: عنصر
تلقائي: قيمة فارغة
sankey.link.colorMode

يمكنك ضبط وضع التلوين للروابط بين العُقد. القيم المتاحة:

  • 'source': يُستخدم لون العُقدة المصدر للروابط المؤدية إلى جميع العُقد المستهدفة.
  • 'target': يُستخدم لون العُقدة المستهدفة للرابط في العُقد المصدر.
  • 'gradient': يتم تمييز الرابط بين المصدر والعقدة الهدف بتدرّج من لون عقدة المصدر إلى لون العُقدة المستهدفة.
  • 'none': الخيار التلقائي، سيتم ضبط ألوان الروابط على الإعداد التلقائي (أو لون على النحو الذي يحدده الخياران sankey.link.color.fill وsankey.link.color.fillOpacity).

يؤدي هذا الخيار إلى إلغاء sankey.link.color.

سلسلة Type:
تلقائي: "بدون"
CANNOT TRANSLATE

تتحكّم هذه السمة في سمات العُقد (الأشرطة العمودية بين الروابط):

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'
    ]
  }
}
النوع: عنصر
تلقائي: قيمة فارغة
sankey.node.colorMode

لضبط وضع تلوين لعُقد سانكي. القيم المتاحة:

  • 'unique' - ستحصل كل عُقدة على لون فريد.
سلسلة Type:
تلقائي: "فريد"
تلميح

كائن به أعضاء لإعداد عناصر تلميح مختلفة. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
النوع: عنصر
تلقائي: قيمة فارغة
تلميح.isHtml

إذا تم ضبط السياسة على "صحيح"، استخدِم التلميحات المعروضة بتنسيق HTML (بدلاً من الملفات المعروضة بتنسيق SVG). يمكنك الاطّلاع على تخصيص محتوى التلميح للحصول على مزيد من التفاصيل.

ملاحظة: لا يكون تخصيص محتوى تلميح HTML من خلال دور بيانات عمود التلميح متاحًا من خلال الرسم البياني الرسم البياني الفقاعي.

النوع: قيمة منطقية
تلقائي: خطأ
تلميح.textStyle

عنصر يحدّد نمط نص التلميح. ويكون الكائن بهذا التنسيق:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

يمكن أن تكون السمة color أي سلسلة ألوان HTML، على سبيل المثال: 'red' أو '#00cc00'. يمكنك أيضًا الاطّلاع على fontName وfontSize.

النوع: عنصر
الخيار التلقائي: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
width

عرض الرسم البياني، بالبكسل.

النوع:
تلقائي: عرض العنصر الذي يتضمّن العنصر

الإجراءات

الطريقة
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().

الخصائص: بدون

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

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