قالب:Graph:Chart/شرح
هذه صفحة توثيق قالب:Graph:Chart الفرعية، لشرح القالب وتصنيفه، وهي لا تدخل في استخدامه. |
هذا القالب يستعمل لوا: |
المعلمات
عدل- width: عرض الرسم البياني
- height: ارتفاع الرسم البياني
- type: نوع الرسم البياني:
- line لاستخدام مخطط بياني خطي
- area لاستخدام area chart
- rect لاستخدام (أعمدة) مخطط بياني
- pie لاستخدام دائرة مجزأة.
- يمكن استخدام سلسلة متعددة مكدسة عبر إضافة البادئة stacked مثال : stackedarea.
- interpolate: interpolation method for line and area charts. It is recommended to use
monotone
for a monotone cubic interpolation – further supported values are listed at https://github.com/vega/vega/wiki/Marks#area. - colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as
#rgb
/#rrggbb
/#aarrggbb
or by a CSS color name. For#aarrggbb
theaa
component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette iscategory10
). - xAxisTitle and yAxisTitle: captions of the x and y axes
- xAxisMin, xAxisMax, yAxisMin, and yAxisMax: minimum and maximum values of the x and y axes (not yet supported for bar charts)
- xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values are listed at https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time. For example, the format
%
can be used to output percentages. - xAxisAngle: rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90
- xType and yType: Data types of the values, e.g.
integer
for integers,number
for real numbers,date
for dates (e.g. YYYY/MM/DD), andstring
for ordinal values. - x: the x-values as a comma-separated list
- y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts
y2
denotes the radiuses of the corresponding sectors. - legend: show legend (only works in case of multiple data series)
- y1Title, y2Title, …: defines the label of the respective data series in the legend
- linewidth: line width for line charts or distance between the pie segments for pie charts
- showValues: Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as
name1:value1, name2:value2
:- format: Format the output according to https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time.
- fontcolor: لون النص
- fontsize: حجم النص
- offset: نقل النص من خلال إزاحة معينة. للمخططات الشريطية والرسوم البيانية الدائرية استخدم midangle حيث يقوم بتحديد إذا كان النص داخل أو خارج المخطط.
- angle (المخططات الدائرية فقط): زاوية النص بالدرجات أو midangle (افتراضي) للزوايا الديناميكية على أساس منتصف زاوية قطاع الكعكة.
- innerRadius: للمخططات الدائرية: يحدد نصف قطرها الداخلي لإنشاء رسم بياني كالدونات.
- showSymbols: For line charts: show a symbol (circle) at each data point.
ملاحظة: في معاينة المحرر تنشىء إضافة Graph canvas element مع الرسومات المتجهة. ومع ذلك، عند حفظ الصفحة يتم إنشاء الرسومات النقطية بصيغة PNG بدلا من ذلك.
أمثلة
عدلLine Chart:
{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.
Area chart:
{{Graph:Chart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Note: The y-axis starts from zero
Bar chart:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Line chart with more than one data series, using colors:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=line|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Area chart with more than one data series showing blended overlap:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Bar chart with multiple data series:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#800000aa,#80ff8000}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Area chart with smoothed data values:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Bar chart with stacked data series:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |