2016-05-20 16 views
1

ハイチャートを使用してヒートマップを作成していますが、セル上にカスタムの境界線の色を使用してデータセットの別の次元を表したいとします。私はデータポイントのborderColor設定オプションでこれを達成することができますが、各セルの境界線は部分的に前のセルの境界の上に描画されるため、グーフィーのように見えます。ハイチャートヒートマップのセル単位の境界線の色

ボーダーの余白を指定して、ボーダーの重なりがないようにセルの境界内にボーダーが完全に描画されるようにする方法はありますか?それとも、自分の国境をカスタムイベントで描く方法はありますか?

この効果はフィドルhttp://jsfiddle.net/8ft7e923/1/と下の画像で確認できます。オレンジの枠線が緑の上に描かれ、赤がオレンジの上に描画される方法に注意してください。このオーバーラップは私が排除しようとしているものです。

enter image description here

+1

これは私の理解から、ここに記述されているSVG要素の制限です。http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn –

答えて

0

ヒートマップシリーズのピクセルのパディングを追加し、設定したパディングの倍増するborderWidthを設定することが可能です。

例:あなたのデモに基づいてhttp://jsfiddle.net/jk9hp3y9/2/

例:http://jsfiddle.net/8ft7e923/2/

Halvorが述べたように - 要素の内側に配置されるSVG要素の境界線を設定することはまだできません。

別の方法として、ボーダーを持たないセルと同じ場所に収まるように、ボーダーが設定されたセルのサイズを変更するためにHighcharts(提供されたデモと同様)を拡張することができます。 extending Highcharts in Docsの詳細

関連する問題