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

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 附带的正常颜色集。问题是当图表使用较暗的颜色时，悬停时工具提示中的标签颜色始终为黑色并且很难阅读。我正在寻找一种方法来引用另一个颜色数组，设置绑定(bind)颜色或类似的东西。

Kendo UI 通过自动将标签颜色更改为白色来处理标准颜色集中的深色，因此应该有一种方法可以做到这一点。

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

更新:

Joe 的回复非常有帮助，但并没有让我明白。

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

Color: 会以某种方式接受函数{}或颜色数组吗？

谢谢，

---

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

注意:我使用 120 亮度来确定我是使用黑色还是白色。

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