تخصيص حجم خط تسميات محور x في Chart.js

في مكتبة Chart.js، يمكنك تعيين حجم الخط الخاص بتسميات محاور الرسم البياني (axes labels) عبر تعريف الخيارات الخاصة بالمحاور في كائن الخيارات الذي تمرره إلى إعدادات الرسم البياني. لضبط حجم الخط الخاص بتسميات محور x بدون تأثير على تكوينات الخط العامة، يمكنك استخدام الخيار ticks داخل تكوين xAxes، وتعيين الحجم المطلوب للخط كما يلي:

javascriptCopy code
{
  ...
  scales: {
    xAxes: [{
      ticks: {
        fontSize: 16 // حجم الخط المطلوب هنا
      },
      ...
    }],
    ...
  },
  ...
}

في هذا المثال، تم تعيين حجم الخط لتسميات محور x إلى 16. يجب أن يتم وضع هذه الإعدادات داخل كائن الخيارات الذي يمرر إلى إعدادات الرسم البياني الخاص بك.

بالطبع! في مكتبة Chart.js، يمكنك تعديل العديد من الخصائص لتخصيص شكل ومظهر الرسم البياني، بما في ذلك حجم الخطوط، ولونها، ونوع الخط، وغيرها. إليك بعض الخصائص التي يمكنك تعديلها لتخصيص تسميات محور x:

• fontSize: لتحديد حجم الخط.
• fontStyle: لتحديد نمط الخط (normal، italic، oblique).
• fontColor: لتحديد لون الخط.
• fontFamily: لتحديد نوع الخط (مثل Arial، Verdana، وغيرها).

قد تحتاج أيضًا إلى استخدام بعض الخيارات الإضافية لتخصيص المزيد من السمات. مثلا، للتحكم في زوايا وطول الخطوط، يمكنك استخدام padding و maxTicksLimit، وللتحكم في تنسيق التواريخ يمكنك استخدام time إذا كنت تستخدم محور x لعرض تواريخ.

إليك مثالًا على كيفية استخدام بعض هذه الخصائص:

javascriptCopy code
{
  ...
  scales: {
    xAxes: [{
      ticks: {
        fontSize: 16,
        fontStyle: 'italic',
        fontColor: 'blue',
        fontFamily: 'Arial',
        padding: 10,
        maxTicksLimit: 5
      },
      ...
    }],
    ...
  },
  ...
}

يمكنك تجربة هذه الخصائص وتعديلها وفقًا لاحتياجاتك لتحقيق التخصيص المطلوب لتسميات محور x في الرسم البياني الخاص بك.