在 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 文档。

更新：

乔的回答非常有帮助，但并没有让我完全明白。

使用颜色：属性我确实可以在全局范围内设置工具提示文本颜色，但是......如果我有浅黄色怎么办？有没有办法直接指定文本在什么背景颜色上应该是什么颜色？

将会颜色：以某种方式接受函数{}或颜色数组？

谢谢，

---

感谢 Roc 向我展示了我所缺少的东西！

笔记：我使用 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>';
    }
}

.

但要小心使用“从模板函数返回的文本中的”和＃“。JavaScript会崩溃。我刚刚在我的代码中使用了“白色”和“黑色”而不是六角形。

Answer 2

您可以通过底部的工具提示选项（下面的代码来自他们的道场）进行设置，我将工具提示设置为 #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"
            }
        });