4

私は.kendoChart()円グラフを作成するために呼び出しを使用しています。

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        return shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0");
    }
}

seriesColors: config.colorsKendo UI に付属している通常のカラー セットをオーバーライドしています。これに関する問題は、グラフが暗い色を使用している場合、ホバー時のツールチップのラベルの色が常に黒であり、非常に読みにくいことです。別のカラー配列を参照する方法、バインドに色を設定する方法、またはそれに類似した方法を探しています。

Kendo UI は標準色セットの暗い色をラベルの色を自動的に白に変更することで処理するので、それを行う方法があるはずです。

私はいくつかの調査を行いましたが、Microsoft が通常リリースするような Kendo UI の適切なドキュメント セットを見つけることができません。

アップデート：

Joe の回答は非常に役に立ちましたが、十分に理解できませんでした。

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 に答える