在 Kendo UI 饼图中设置工具提示标签颜色答案

【问题标题】：Setting Tool tip label colors on a KendoUI Pie Chart在 Kendo UI 饼图中设置工具提示标签颜色
【发布时间】：2014-09-22 05:53:35
【问题描述】：

我正在使用.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 文本颜色，但是......如果我有浅黄色怎么办？有没有办法直接指定文本在什么背景颜色上应该是什么颜色？

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

谢谢，

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

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

【问题讨论】：

标签： javascript asp.net-mvc-4 kendo-ui uicolor kendo-chart

【解决方案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，您的示例与我想要的很接近，它引导我使用颜色：而不是 :background。无论如何，我希望不要为所有文本标签定义一种颜色，而是为每个标签定义一种颜色。我试过-color: function (e) {`return e.tooltipTextColor;`}但这不起作用。 tooltipTextColor 是在 kendo 数据源模式中设置的东西：根据文档，颜色中唯一允许的东西：是颜色字符串。

【解决方案2】：

您非常接近问题中的解决方案，因为您可以使用函数委托作为模板。 Kendo 工具提示是一个 div 元素，因此只需返回一个带有您需要的颜色的 html 块，工具提示将是深色背景上的白色文本或浅色背景上的黑色文本。

要检测背景是否太暗，您可以使用以下线程How to check if hex color is "too black"? 对来自“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 会崩溃。我只是在我的代码中使用了“白色”和“黑色”而不是十六进制颜色。

【讨论】：