在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通过自动将标签颜色更改为白色来处理标准颜色集中的深色颜色，因此应该有一种方式可以做到。

我已经做了一些研究，但是我找不到类似于Microsoft通常发布的Kendo UI文档的好集合。

更新：

Joe的回答非常有帮助，但还没有完全解决我的问题。

使用Color：属性，我确实可以在全局范围内设置ToolTip文本颜色，但是…如果我有浅黄色怎么办？是否有一种方法可以直接指定文本应该在什么背景颜色下是什么颜色？

Color：会接受函数{}或颜色数组吗？

谢谢，

---

特别感谢Roc向我展示了我所缺少的内容！

注意：我使用了120亮度作为确定我是否使用黑色或白色的值。

- Toby

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"
            }
        });

- Joe

---

Joe，你的例子接近我想要的，它让我想到了color:而不是:background。无论如何，我希望不是为所有文本标签定义单一颜色，而是为每个标签定义一个颜色。我尝试过-color: function (e) { return e.tooltipTextColor; }但这并不起作用。tooltipTextColor是在kendo数据源模式中设置的内容：根据文档，color:中允许的唯一内容是颜色字符串。 - Toby

Answer 2

您在问题中非常接近解决方案，因为您可以使用函数委托作为模板。 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>';
    }
}

但是在模板函数返回的文本中使用 ' 和 # 时要小心，否则JavaScript会崩溃。我在代码中使用了 'white' 和 'black' 而不是十六进制颜色。

- Roc