在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 UI通過將標簽顏色自動更改為白色來處理標准顏色集中的深色，因此應該有辦法實現。

我做了一些研究，但是我找不到類似於微軟通常發布的Kendo UI的一套好的文檔。

更新：

Joe的回復非常有幫助，但它並沒有讓我在那里。

使用Color：屬性我確實可以在全局范圍內設置ToolTip文本顏色，但是...如果我有淺黃色怎么辦？ 有沒有辦法直接指定文本應該是什么顏色的背景顏色？

將Color：以某種方式接受函數{}或顏色數組？

謝謝，

---

感謝Roc向我展示了我錯過的東西！

注意：如果我使用黑色或白色，我使用120 luma作為我的確定值。

Answer 1

您可以通過工具提示選項（下面的代碼來自他們的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"
            }
        });

Answer 2

您非常接近問題中的解決方案，因為您可以使用函數委托作為模板。 劍道工具提示是一個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>';
    }
}

但要小心在模板函數返回的文本中使用'和＃。 Javascript會崩潰。 我在代碼中使用了“白色”和“黑色”而不是十六進制顏色。