تعيين ألوان تسمية تلميح الأداة على مخطط KendoUI الدائري

Question

أنا أستخدم أ .kendoChart() اتصل لإنشاء مخطط دائري بنفسي.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        return shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0");
    }
}

استخدام seriesColors: config.colors أنا أتجاوز مجموعة الألوان العادية التي تأتي مع Kendo UI.تكمن المشكلة في ذلك عندما يستخدم المخطط ألوانًا داكنة، ويكون لون التسمية في تلميح الأداة عند التمرير أسودًا دائمًا ويصعب قراءته.أنا أبحث عن طريقة للإشارة إلى مجموعة ألوان أخرى، أو ضبط الألوان على الرابط أو شيء مشابه لذلك.

تتعامل واجهة مستخدم Kendo مع الألوان الداكنة في مجموعة الألوان القياسية عن طريق تغيير ألوان الملصق إلى اللون الأبيض تلقائيًا لذا يجب أن تكون هناك طريقة للقيام بذلك.

لقد قمت ببعض الأبحاث ولكن لم أتمكن من العثور على مجموعة جيدة من الوثائق الخاصة بـ Kendo UI المشابهة لما تصدره Microsoft عادةً.

تحديث:

كانت استجابة جو مفيدة للغاية ولكنها لم تصلني إلى هناك تمامًا.

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

سوف اللون:قبول وظيفة {} أو مجموعة من الألوان بطريقة أو بأخرى؟

شكرًا،

---

شكرًا لروك لأنه أظهر لي بالضبط ما كنت أفتقده!

ملحوظة:لقد استخدمت 120 لوما لتحديد القيمة الخاصة بي إذا كنت سأستخدم الأسود أو الأبيض.

Answer 1

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

لاكتشاف ما إذا كانت الخلفية داكنة جدًا، يمكنك استخدام الموضوع التالي كيفية التحقق مما إذا كان اللون السداسي "أسود جدًا"؟ مقابل لون السلسلة من الكائن "e" - e.series.color.لقد استخدمت وظيفة مجردة getColorLuma() أدناه لتجنب الازدواجية.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        var textColor = getColorLuma(e.series.color) < 128 ? 'white' : 'black';
        return '<span style="color:' + textColor + '">' +  
          shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0") +
          '</span>';
    }
}

لكن كن حذرًا عند استخدام "" و"#" في النص الذي يتم إرجاعه من وظيفة القالب.سوف يتعطل جافا سكريبت.لقد استخدمت للتو "أبيض" و"أسود" في الكود الخاص بي بدلاً من الألوان السداسية.

Answer 2

يمكنك ضبط ذلك عبر خيارات تلميحات الأدوات (الكود أدناه مأخوذ من dojo) في الأسفل مباشرةً، قمت بتعيين تلميحات الأدوات على #ff0000.

الوثائق قوية جدًا (إذا كان التنقل فيها محرجًا بعض الشيء)

http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-tooltip.background

        $("#chart").kendoChart({
            title: {
                position: "bottom",
                text: "Share of Internet Population Growth, 2007 - 2012"
            },
            legend: {
                visible: false
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                labels: {
                    visible: true,
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                }
            },
            series: [{
                type: "pie",
                startAngle: 150,
                data: [{
                    category: "Asia",
                    value: 53.8,
                    color: "#9de219"
                },{
                    category: "Europe",
                    value: 16.1,
                    color: "#90cc38"
                },{
                    category: "Latin America",
                    value: 11.3,
                    color: "#068c35"
                },{
                    category: "Africa",
                    value: 9.6,
                    color: "#006634"
                },{
                    category: "Middle East",
                    value: 5.2,
                    color: "#004d38"
                },{
                    category: "North America",
                    value: 3.6,
                    color: "#033939"
                }]
            }],
            tooltip: {
                visible: true,
                format: "{0}%",
              background: "#ff0000"
            }
        });