剣道ui円グラフのツールチップラベルの色を設定する

https://stackoverflow.com//questions/25039374

21-12-2019
|

質問

私は.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に付属の通常のカラーセットを上書きしています。これに関する問題は、チャートがより暗い色を使用するとき、ホバーのツールチップのラベル色は常に黒であり、読みにくいです。私は別のカラーアレイを参照する方法を探しており、バインド上の色をそれに似たものに設定します。

剣道UIは、ラベル色を白くすることによって、標準色の濃い色を扱い、それをする方法があるはずです。

私はいくつかの研究をしましたが、マイクロソフトが通常リリースするkendo UIのための良い文書のセットを見つけることができません。

更新：

ジョーの回答は非常に役に立ちましたが、それは私をそこにいませんでした。

色：属性私は実際にグローバルスケールでツールチップテキストの色を設定することができますが、...黄色い黄色い場合はどうなりますか？テキストがどのような背景色にあるべきかを直接指定する方法はありますか？

色：関数{}または色の配列を受け入れることはどういうわけか？

ありがとう、

私が欠けていたものを正確に示すためのROCに感謝します！

注：私は黒または白を使用する場合の私の決定値に120ルーマを使いました。

解決

あなたはテンプレートとして関数代議員を使うことができるので、あなたはあなたの質問の解決策に非常に近いです。Kendo TooltipはDIV要素であるため、必要な色でHTMLブロックを返すだけで、ツールチップは暗い背景に白いテキストや明るい背景に黒のテキストになります。

背景が暗すぎるかどうかを検出するには、次のスレッド Hex色が「黒すぎる」かどうかを確認する方法" 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がクラッシュします。私はちょうど六角色の代わりに私のコードで「白」と「黒」を使用しました。

他のヒント

ツールチップオプション（以下のコードはDOJOからのコード）を介してこれを設定することができますToolTipsを#ff0000に設定します。

ドキュメントはかなり固体です（ちょっと厄介な場合はナビゲートする場合）

> http://docs.telerik.com/KENDO-UI / API / DATAVIZ /チャート＃設定ツールチップ。バックグラウンド

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow