امتداد:الرسم البياني

**الدليل المرجعي لامتدادات ميدياويكي**
Chart; حالة الإصدار مستقر
تنفيذ	وسم
بيان	يظهر كالتالي
المؤلف/المؤلفون	Brooke Vibber, Katie Filbert, Roan Kattouw
سياسة التوافق	النسخة الرئيسية تحافظ على التوافق مع الإصدارات السابقة.
MediaWiki	>= 1.47.0
تغييرات قاعدة البيانات	لا
	المتغيرات $wgChartRequestSizeLimit; $wgChartProgressiveEnhancement; $wgChartWizardEnabled; $wgChartTransformsEnabled; $wgChartServiceUrl; $wgChartCliPath;
	الروابط المستخدمة ChangeTagsListActive; LinksUpdateComplete; ListDefinedTags; PageSaveComplete; ParserFirstCallInit; RecentChange_save; SkinTemplateNavigation::Universal; SpecialPage_initList;
Licence	رخصة جنو العمومية 3.0 أو ما بعدها
التنزيل	تنزيل الامتداد ; غت [?]: تصفح المستودع (Phabricator · GitHub); مراجعة الكود البرمجي على غيريت; تاريخ الالتزام على غت; تنزيل المصدر في صيغة تاربول; ; README
	ترجم الامتداد Chart لو كان متوفرا على translatewiki.net
المسائل	المهام المفتوحة · الإبلاغ عن عطل تقني

This page is a translated version of the page Extension:Chart and the translation is 97% complete.

Outdated translations are marked like this.

توفر الامتداد Chart إمكانات أساسية وتفاعلية لـ ، صُممت لتحل محل بعض جوانب الامتداد Graph ولكن ليس جميعها. هذا الامتداد قيد التطوير حاليًا لويكيميديا. انظر Extension:Chart/Project لمزيد من التفاصيل حول عملية التطوير.

يدعم هذا الملحق أنواع المخططات التالية:

مخطط بياني خطي
مخطط المنطقة
مخطط شريطي
مخطط بياني خطي

التنصيب

يتطلب امتداد Chart تثبيت الإضافة JsonConfig ، بالإضافة إلى تنزيل مكتبة JavaScript (وهي في الواقع TypeScript) المسماة Chart Renderer.

طالع الملف README.md في المستودع للحصول على تعليمات الإعداد الكاملة.

إنتاج ويكيميديا

بالنسبة للاستخدام في بيئة الإنتاج الخاصة بويكيميديا، راجع wikitech:Kubernetes/Deployments#Cheatsheet للاطلاع على التعليمات العامة حول نشر الخدمات. أجزاء رئيسية هنا:

find your commit's build image id from chart-renderer's CI, eg "2025-06-24-201619-production"
- edit deployment-charts's helmfile.d/services/chart-renderer/values.yaml to reference the new version
- أن يقبل المنشر النشر
(as a deployer) log into deployment.codfw.wmnet or deployment.eqiad.wmnet depending on the active data center
- $ cd /srv/deployment-charts/helmfile.d/services/chart-renderer
  - latest service config should appear within a couple minutes (there's a regular update job)
- $ helmfile -e staging -i apply --context 5
  - confirm the changes and let it deploy to staging
test rendering on beta cluster
- TODO: add a specific page with our planned live test charts
- TODO: add directions on checking pixel rendering results
once confirmed good, deploy to main clusters:
- $ helmfile -e codfw -i apply --context 5
  - confirm the changes and let it deploy to codfw
- $ helmfile -e eqiad -i apply --context 5
  - confirm the changes and let it deploy to eqiad

كيفية الاستخدام

لإنشاء مخطط، يجب عليك تحديد تعريف للمخطط لربطه بمصدر البيانات الجدولية الذي ترغب في عرضه. يتم تنظيم تعريف المخطط البياني في هيئة ملف JSON بسيط نسبياً؛ راجع Extension:Chart/Specification للاطلاع على تفاصيل الصيغة.

بنية .tab لبيانات الجداول

يمكن عرض جميع المخططات في هذا المثال استناداً إلى مصدر البيانات نفسه: Data:Chart Example Data.tab، مجموعة بيانات خيالية. يمكن العثور على نماذج لمحتويات هذه الصفحات في الدليل sample.

Data:Examples.chart

{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Chart Example Data.tab",
    "type": "line",
    "title": {
        "en": "Example Chart Title"
    },
    "subtitle": {
        "en": "Example Subtitle"
    },
    "xAxis": {
        "title": {
        	"en": "Example X Axis Title"
        },
        "format": "none"
    },
    "yAxis": {
        "title": {
            "en": "Example Y Axis Title"
        },
        "format": "none"
    },
    "mediawikiCategories": [
        {
            "name": "Example category",
            "sort": "Its sortkey"
        }
    ],
    "transform": {
        "module": "Optional lua module for data transforms",
        "function": "transform_func",
        "args": {
            "arg_name": "arg_value"
        }
    }
}

بمجرد تحديد المخطط، يمكنك عرضه بسهولة باستخدام دالة المُحلِّل #chart. في هذه الحالة، تُعرف بيانات المخطط في Data:Chart Example Data.tab، ويُعرف المخطط نفسه في Data:Example.Line.chart:

Wikipedia article title

{{#chart:Example.Line.chart}}

لاحظ أنه يمكن أن يكون المخطط عاماً وقابلاً لإعادة الاستخدام مع مصادر بيانات مختلفة، على النحو التالي:

{{#chart:Population through years.chart
|data=Population of USA.tab
}}

{{#chart:Population through years.chart
|data=Population of UK.tab
}}

{{#chart:Population through years.chart
|data=Population of Poland.tab
}}

تنسيقات عفا عليها الزمن

The Chart definition JSON format originally allowed the title to be a plain string, rather than an object with localized title strings. xAxis and yAxis title fields also supported plain strings, but is now deprecated.

Deprecated:

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "title": "Example chart",
    "xAxis": {
        "title": "month"
    },
    "yAxis": {
        "title": "votes"
    },
}

This should instead be:

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "title": {
      "en": "Example chart"
    },
    "xAxis": {
        "title": {
            "en": "month"
        }
    },
    "yAxis": {
        "title": {
            "en": "votes"
        }
    },
}

تنسيقات التاريخ في البيانات الجدولية

Currently the extension doesn't properly support date formats, but is able to show dates in a string format (numbers not supported) on the X-Axis when configured as such. عند إنشاء مخططات تتضمن تواريخ على المحور السيني (x-axis)، يجب تنسيق التواريخ في البيانات الجدولية كسلاسل نصية بطول 10 أحرف بالضبط، وذلك وفقاً للصيغة التالية:

YYYY-MM-DD، على سبيل المثال، 2025-10-20

This means the date format of Wikidata is for example not supported at the moment. قد تعمل أيضاً سلاسل نصية أخرى مكونة من 10 محارف يمكن تحليلها بواسطة الدالة `Date.parse()` في JavaScript، رغم أنها غير مدعومة رسمياً.

عند رصد تواريخ في العمود الأول من البيانات الجدولية، ستتم مواءمتها محلياً تلقائياً بناءً على لغة محتوى الويكي. Below is an example that shows a date format that will correctly display.

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "mediawikiCategories": [
        {
            "name": "Data:.tab",
            "sort": ""
        },
        {
            "name": "Data:Examples.tab",
            "sort": ""
        }
    ],
    "schema": {
        "fields": [
            {
                "name": "date",
                "type": "string",
                "title": {
                    "en": "Date",
                    "fr": "Date"
                }
            },
            {
                "name": "pc",
                "type": "number",
                "title": {
                    "en": "PC",
                    "fr": "PC"
                }
            },
            {
                "name": "liberal",
                "type": "number",
                "title": {
                    "en": "Liberal",
                    "fr": "Libéral"
                }
            },
            {
                "name": "ndp",
                "type": "number",
                "title": {
                    "en": "NDP",
                    "fr": "NPD"
                }
            },
            {
                "name": "bq",
                "type": "number",
                "title": {
                    "en": "BQ",
                    "fr": "BQ"
                }
            },
            {
                "name": "reform",
                "type": "number",
                "title": {
                    "en": "Reform",
                    "fr": "Réform"
                }
            }
        ]
    },
    "data": [
        [
            "1993-09-09",
            35,
            37,
            8,
            8,
            10
        ],
        [
            "1993-09-14",
            36,
            33,
            8,
            10,
            11
        ],
        [
            "1993-09-20",
            35,
            35,
            6,
            11,
            11
        ]
    ]
}

طالع أمثلة في كومنز:

لسنوات، ينبغي أن تكون التواريخ أرقاماً:

{
    "license": "CC0-1.0",
    "description": {
        "en": "New Zealand annual wine production, in millions of litres"
    },
    "sources": "Statistics from New Zealand Winegrowers 1998–2024 annual reports",
    "schema": {
        "fields": [
            {
                "name": "year",
                "type": "number",
                "title": {
                    "en": "Year"
                }
            },
            {
                "name": "production",
                "type": "number",
                "title": {
                    "en": "Wine produced (million litres)"
                }
            }
        ]
    },
    "data": [
        [
            1990,
            54.4
        ],
        [
            1991,
            49.9
        ],
        [
            1992,
            41.6
        ],
        [
            1993,
            32.5
        ],
        [
            1994,
            41.1
        ],
        [
            1995,
            56.4
        ]
    ]
}

مثال على المخططات والبيانات الجدولية التي تتضمن السنوات على المحور السيني:

طالع وثيقة ADR الخاصة بدعم التواريخ في غيريت لمزيد من التفاصيل حول دعم التواريخ.

تخصيص

بيانات خام

ألوان الهكس العشرة المتاحة.

تُعد خيارات تخصيص المخططات محدودة حالياً. يُؤمَل أن يُوصل، عقب مراحل الاختبار والمناقشة والتقييم، إلى حلول للتخصيص لا تمس إمكانية الوصول، أو طريقة العرض الخاصة بالأجهزة، أو الجوانب الأمنية.

المقاسات

تشغل المخططات حالياً كامل عرض الحاوية التي توضع فيها. لا توجد طريقة لتعديل الارتفاع.

يتمثل الهدف النهائي في ضمان إمكانية عرض المخططات بوضوح وقابلية للقراءة، بغض النظر عن الجهاز المستخدم؛ راجع T376845 لمزيد من التفاصيل.

الطابع العام

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

تتطلب بعض المخططات البيانية أنظمة ألوان محددة، على سبيل المثال، لتمثيل بيانات تتعلق بالأحزاب السياسية. لا تزال مسألة كيفية دعم هذا النوع من التخصيص على النحو الأمثل، دون المساس بقدرة القراء ذوي الاحتياجات المتعلقة بإمكانية الوصول (مثل المصابين بعمى الألوان) على استخدامه، تمثل تساؤلاً مفتوحاً.

تنبيه

يُرجى ملاحظة أنه على الرغم من أن المخططات تُنتج حالياً مخرجات بصيغة SVG يمكن تنسيقها باستخدام TemplateStyles، إلا أن تنسيق عناصر SVG المرتبطة بها يجب ألا يُعتبر مستقراً، إذ قد يتغير في أي وقت. يُرجى عدم الاعتماد على CSS لتغيير مظهر المخططات؛ فقد يؤدي ذلك إلى تعطل المخططات مستقبلاً أو التعارض مع ميزات إمكانية الوصول التي تغير حجم الخط، وكذلك ميزات مثل الوضع الداكن.

التدويل

لا يمكن تضمين المخططات إلا بلغة المحتوى الخاصة بالويكي؛ ولذلك، على سبيل المثال، لن تؤثر سلسلة الاستعلام "uselang" (مثل ?uselang=es) على المخطط.

يدعم تنسيق المخطط تحديد النصوص، مثل العنوان والتسميات، بلغات مختلفة، مما يتيح استخدام المخطط نفسه في مواقع ويكي بلغات متعددة. طالع هذا المثال لمخطط يدعم لغات متعددة ويُعرض في ويكي باللغة الإسبانية.

المشكلات المعروفة

طالع هذا العرض المُصفَّى للوحة Charts على Phabricator.

أنواع المخططات

بالنسبة لجميع المخططات، يُتوقع أن تكون البيانات مرتبة في أعمدة، بحيث يمثل العمود الأول x-axis، وتمثل الأعمدة التالية السلاسل أو المنحنيات على y-axis.

خط

بيانات خام

هذا مثال على مخطط خطي.

في المثال التالي، يُضع العنصر {{#chart: }} داخل حاوية {{Image frame }} لتحديد عرض المخطط البياني وإدراج تعليق توضيحي. يُوفر أيضاً رابط للبيانات الجدولية الخام، حيث يمكن العثور على معلومات حول مصادر البيانات:

Wikipedia article title

{{image frame
|content={{#chart:Example.Line.chart}} [[commons:Data:Chart Example Data.tab|'''Raw data''']]
|width = 340
|caption = This is an example of a line chart.
}}

اطلع على النتيجة في هذا القسم.

شريط

هنا، يمتد المخطط البياني على كامل عرض منطقة محتوى الصفحة:

Wikipedia article title

{{#chart:Example.Bar.chart}} <div align="center">[[commons:Data:Chart Example Data.tab|'''Raw data''']]</div>

يؤدي هذا إلى:

بيانات خام

مساحة

بيانات خام

الدائرة

تُعد المخططات الدائرية نوعاً خاصاً من المخططات، وقد تتطلب مصادر البيانات تعديلاً ليتم عرضها بالشكل المناسب.

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

على سبيل المثال، في الحالات التي تُمثّل فيها صفوف متعددة قيماً للمتغيرات A وB وC في تواريخ عديدة (مثل الأول والثاني من شهر يناير)، فإن شريحة المتغير A في المخطط الدائري ستُمثّل مجموع كافة قيم الصفوف الخاصة بـ A عبر تلك التواريخ.

بيانات خام

إيجاد المخططات القائمة

الرسوم البيانية التي يمكن استخدامها في المقالات موجودة على ويكيميديا كومنز، ويمكن تتبعها باستخدام تصنيفات ميدياويكي.

يمكن استخدام هذا الاستعلام كوسيط للعثور على المخططات الموسيقية التي أعدها الآخرون والمساهمة في ترجمتها، واستخدام هذا للعثور على صفحات علامة التبويب التي يمكن الاستعانة بها لإنشاء تلك المخططات.

يمكن العثور على مجموعة صفحات الويكي التي تستخدم المخططات في أي موقع ويكي معين ضمن التصنيف الذي حُدِّد اسمه في MediaWiki:chart-render-category و MediaWiki:Chart-error-category (Category:Pages using the Chart extension و Category:Pages using the Chart extension with rendering errors في موقع الويكي هذا). يُرجى التأكد من ربط تصنيفات الويكي الخاصة بك بـ d:Q131382738 وd:Q131406605 لتسهيل البحث عبر الويكي.

الانتقال من امتداد Graph

يُرجى الاطلاع على التصنيف صفحات ويكيبيديا ذات الرسوم البيانية المعطلة بمختلف اللغات؛ وذلك للعثور على الرسوم البيانية القديمة التي تحتاج إلى النقل إلى امتداد Chart. ومع ذلك، فقد حُذف بعضها بالفعل دون استبدالها بمخططات جديدة. يمكن مقارنة القائمة بـ [قائمة مؤرشفة لأول 200 صفحة —من أصل 23,811 صفحة في ويكيبيديا الإنجليزية— ذات رسوم بيانية معطلة] تعود لعام 2023 (أي بُعيد إضافة القوالب إلى تلك الفئة)، وبالقوائم المقابلة لها في اللغات الأخرى.

توثيق فني

نظراً للمشكلات المتعلقة بـ ملحق: الرسوم البيانية ، فقد دُرست جميع القرارات الخاصة بالامتداد الجديد بعناية، وذلك أملاً في بناء الثقة في البديل الجديد.

حتى الآن، تم توثيق القرارات الفنية في مستودع الكود المصدري داخل المجلد /doc/adr.

مراقبة الأخطاء

تُخزن الصفحات التي تفشل في .chart تلقائياً في commons:Category:Pages using the Chart extension with rendering errors. تُخزَّن صفحات الويكي التي تحتوي على مخططات معيبة تلقائياً في تصنيف:صفحات تستخدم امتداد الرسم البياني مع أخطاء في العرض ضمن نسخ اللغات المختلفة.

ستُسجل الأخطاء المتعلقة بعرض المخططات من جانب العميل في logstash. (للمطورين فقط.)

أدوات إعداد المخططات البيانية

هناك عدة طرق يمكن تصورها لإنشاء وتحرير المخططات وبياناتها الجدولية بشكل شبه آلي:

يمكن استخدام البرنامج النصي graphDataImport في متصفح الويب لاستخراج البيانات من نص الويكي الخاص بـ مخطط موجود (أو ما شابه)، وتحويلها إلى صفحة .tab، وصفحة تعريف .chart، ونص ويكي جديد.
يمكن توجيه الذكاء الاصطناعي التوليدي لاستخراج البيانات من كود الويكي الخاص بالرسوم البيانية والجداول الموجودة، وتحويلها إلى صفحات .tab و.chart، وإنشاء كود ويكي جديد وفقاً للمواصفات المحددة. كما يمكنه توفير ترجمة للعناوين، واستخدامه لتوسيع وتحديث الصفحة .tab ببيانات جديدة.
يمكن للأداة TabularImportExport تحويل ملفات Excel و.csv من وإلى صفحات .tab. يمكنك تفعيله عبر تفضيلاتك في كومنز.
تتوفر واجهة مستخدم JSON (تعديل كجدول) (وهي جزء من الامتداد Jsonconfig ) من صفحة التحرير .tab.
يمكن لبعض البوتات استيراد الإحصاءات دورياً من الويب، أو من رسوم بيانية موجودة في ويكيبيديا، إلى صفحات .tab أو .chart، وذلك بناءً على طلب. تشمل هذه البوتات DPLA bot وSLiuBot.
يقوم GraphBot بنقل الرسوم البيانية من ويكيبيديا الإنجليزية إلى المخططات.

انظر أيضا

Extension:Chart/Project/FAQ – الأسئلة الشائعة
Transforms

هذا الامتداد يستخدم على واحد من مشاريع ويكيميديا أو أكثر من واحد. يعني هذا الأمر أن الامتداد مستقر ويعمل/تعمل جيدا بما فيه الكفاية ليستخدم/لتستخدم في مواقع تتمتع بمستوى زيارات مرتفع مثل هذه. ابحث عن اسم هذا الامتداد في ملفات الضبط CommonSettings.php وكذلك InitialiseSettings.php كي ترى أين تنصب. توجد قائمة كاملة بالامتدادات المنصبة على موقع ويكي بعينه على صفحة Special:Version الخاصة بموقع الويكي.

التنصيب

إنتاج ويكيميديا ​​

كيفية الاستخدام

تنسيقات عفا عليها الزمن

تنسيقات التاريخ في البيانات الجدولية

تخصيص

المقاسات

الطابع العام

تنبيه

التدويل

المشكلات المعروفة

أنواع المخططات

خط

شريط

مساحة

الدائرة

إيجاد المخططات القائمة

الانتقال من امتداد Graph

توثيق فني

مراقبة الأخطاء

أدوات إعداد المخططات البيانية

انظر أيضا

إنتاج ويكيميديا