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

您可以通过工具提示选项（下面的代码来自他们的道场）在底部设置，我将工具提示设置为#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块，工具提示将是深色背景上的白色文本或浅色背景上的黑色文本。

要检测背景是否太暗，您可以再次使用以下线程How to check if hex color is "too black"?来自＆＃34; e＆＃34;对象 - 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>';
    }
}

但要小心使用＆＃39;和＃在模板函数返回的文本中。 Javascript会崩溃。我刚刚使用了白色＆＃39;和黑色＆＃39;在我的代码而不是十六进制颜色。

在Kendo UI饼图上设置工具提示标签颜色

更新

2 个答案: