كيفية تخصيص الرسوم البيانية

يمكنك استخدام أدوات مخطط Google مع الإعداد الافتراضي - تكون جميع عمليات التخصيص اختيارية والإعداد الأساسي جاهز للتشغيل. ومع ذلك، يمكن تخصيص الرسومات البيانية بسهولة إذا اعتمدت صفحة الويب نمطًا يتعارض مع الإعدادات الافتراضية المتوفرة. يعرض كل رسم بياني عددًا من الخيارات التي تخصّص مظهره وأسلوبه. ويتم التعبير عن هذه الخيارات في شكل أزواج الاسم:القيمة في كائن الخيارات الذي يتم تمريره إلى طريقة الرسم البياني draw().

عادةً ما تتيح الرسوم البيانية خيارات مخصّصة مناسبة لهذا التمثيل البصري. على سبيل المثال، يتيح الرسم البياني الجدولي خيار sortColumn لتحديد عمود الترتيب التلقائي، بينما يتيح التمثيل البصري المخطط الدائري خيار colors الذي يتيح لك تحديد ألوان الشرائح. ويجب أن تصف مستندات كل رسم بياني الخيارات المتاحة.

سيتم نقل خياراتك كمعلّمة ثانية اختيارية إلى طريقة draw() للرسم البياني الموضّحة سابقًا. ويمكنك تحديد الخيارات من خلال إنشاء كائن له خصائص خاصة بكل رسم بياني.

يوضح المثال التالي إنشاء كائن خيارات يحدّد جميع هذه الخصائص:

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

في ما يلي المخطط الذي تنشئه هذه الشفرة.

يمكنك أيضًا تحديد الخيارات حرفيًا باستخدام طريقة draw():

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

في ما يلي المخطط الذي تنشئه هذه الشفرة.

مزيد من المعلومات

• مثال على العلامة التجارية المخصّصة
• مثال على جدول مخصّص