تحديد عائلة الخط باستخدام مخططات Google؟

Question

هل من الممكن تعيين عائلة الخطوط لأي من تصورات مخطط Google غير الفلاش؟خصيصًا لأشياء مثل النص الموجود على محور المخطط.مخططات جوجل قوية ولكنها قبيحة.ولسوء الحظ لا أستطيع الانتقال إلى شيء أجمل، مثل رافائيل.

Answer 1

وإلقاء نظرة على نمط النص خصائص، نأخذ على سبيل المثال hAxis.textStyle:

hAxis.textStyle: { color: '#FF0000', 
                   fontName: 'Arial', 
                   fontSize: '10' }

Answer 2

يمكنك تغيير الخط الأسرة مثل هذا: fontName: "ارييل"

Answer 3

إذن، كلاهما إجابات دقيقة من الناحية الفنية، ولكني أردت إضافة القليل من السياق (الذي لم أتمكن من إضافته في التعليقات لأنني لا أمتلك السمعة المناسبة).

1. على الرغم من أن استخدام تدوين الكائن لتمرير أنماط النص لكل شيء يعد أمرًا رائعًا وبالتأكيد الطريقة المفضلة لتصميم عناصر المخطط من وجهة نظر Google، إلا أنك مقيد في النهاية بخيارات الخطوط التي تضعها Google في مستودع الخطوط الخاص بها.لذا، فإن أحد الأمثلة التي توضح Segoe UI لا يعمل، لأن Google لا تمتلك ذلك في مستودعها.وهذا أمر مؤسف، لأنني أستخدم واجهة برمجة تطبيقات الرسوم البيانية ضمن تطبيق Office Fabric UI.
2. اقترح مستخدم آخر إجراء التصميم عبر CSS.هذا يعمل...ولكن على الشاشة فقطالطريقة الوحيدة لطباعة هذه الرسوم البيانية التي وجدتها هي تقديمها باستخدام ملفات PNG هذه الطريقة.لكن، بالطبع، هذا لا يستحوذ إلا على ما تم تكوينه في عنصر DOM؛فهي لا تأخذ في الاعتبار CSS، لذا تميل الطباعة إلى أن تكون غير متوقعة.

كان الحل الذي توصلت إليه هو تغيير العناصر مباشرة داخل حاوية SVG باستخدام jQuery الذي تم تحميله بعد أن يدخل المخطط في الحالة "جاهز"، ولكن قبل عرضها بتنسيق PNG:

google.visualization.events.addListener(chart,'ready',function(){
    var titleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(1)');
    var subtitleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(2)');
    var tooltipText = $('[chart-container] > div > div > svg > g > g').find('text');
    var tooltipStyle = {'font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif'};
    var otherText = $('g > text');
    var textStyle = {'font-family':"'Segoe UI SemiLight WestEuropean','Segoe UI SemiLight','Segoe WP SemiLight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif"};
    var titleStyle = {'font-size':'21px','font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif',fill:'#333'};
    var titlePos = {x:20,y:30};
    var subtitleStyle = {'font-size':'17px','font-family':"'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif",fill:'#666'};
    var subtitlePos = {y:50,x:20};
    tooltipText.css(tooltipStyle);
    otherText.css(textStyle);
    titleText.css(titleStyle).attr(titlePos);
    subtitleText.css(subtitleStyle).attr(subtitlePos);
});

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