4

我正在使用.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 文档集。

更新：

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

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

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

谢谢，

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

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

4

2 回答 2

4

您可以通过底部的工具提示选项（下面的代码来自他们的 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"
            }
        });
于 2014-07-30T15:22:11.700 回答
1

You were very close to the solution in your question since you can use a function delegate as a template. Kendo tooltip is a div element, so just return an html block with the color you need and the tooltips will be white text on the dark background or a black text on the light background.

To detect if the background is too dark you can use the following thread How to check if hex color is "too black"? agains the series color from the "e" object - e.series.color. I used an abstract function getColorLuma() below to avoid duplication.

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>';
    }
}

But be careful with the using ' and # in the text returned from the template function. Javascript will crash. I just used 'white' and 'black' in my code instead of hex colors.

于 2014-08-15T14:33:19.710 回答